CSS Pseudo-elements :before & :after work differently in Internet Explorer

Question

I have a very specific problem as I am trying to create a navigation that has angles using purely CSS without images or javascript. I have figured it out so that it works perfectly but the problem I am coming across is that IE 9 and Chrome look different. I can get both to work by changing the margins of the pseudo elements but I would prefer a single solution to work in both. If anyone can figure out why the margins are different and give me a single CSS solution to work in both browsers that would be great. Otherwise I will have to add a seperate class for IE and force it to work using a seperate CSS entry.

Here is the jsfiddle to work with arrow-nav

Here is the HTML

<ul>
    <li><a href="#" >Some Navigation</a></li>
    <li><a href="#">More navigation</a></li>
    <li><a href="#">Another Nav</a></li>
    <li><a href="#">Test Nav</a></li>
    <li><a href="#">A Test Navigation</a></li>
</ul>

The CSS

ul {
    float:right;
    list-style-type:none;
    margin:0;
    padding:0;
    width: 300px;
}
ul li a {
    float:left;
    width:300px;
}
ul li{
    float:left;
    width: 300px;
    height:50px;
    line-height:50px;
    text-indent:10%;
    background: grey;
    margin-bottom:10px;
    border:1px solid black;
}
ul li:before {
    content:"";
    position:absolute;
    margin-top:-1px;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-right: 21px solid black;
    margin-left:-22px;
}
ul li:after {
    content:"";
    position:absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 20px solid grey;
    margin-left:-320px;
}

Answer 1

You can fix this by using absolute positioning on the pseudo elements. To make this work correctly, set the position of ul li to relative (which will cause elements positioned absolutely within it to be relative to the li). Then, update the position of the pseudo elements to use left instead of margin-left :

ul li{
    position: relative; // Add this.
    float:left;
    width: 300px;
    height:50px;
    line-height:50px;
    text-indent:10%;
    background: grey;
    margin-bottom:10px;
    border:1px solid black;
}
ul li:before {
    content:"";
    position:absolute;
    margin-top:-1px;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-right: 21px solid black;
    left:-22px; // Update from margin-left to left
}
ul li:after {
    content:"";
    position:absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 20px solid grey;
    left:-20px; // Update from margin-left to left
}

http://jsfiddle.net/ryanbrill/jSdWR/5/

Answer 2

You need to specify the position for the elements (for example top and left values). And for some reason, which I don't fully understand - to add position: relative to the li (not the ul ):

http://jsfiddle.net/jSdWR/4/