Pseudoelementy CSS: before &: after work inaczej w Internet Explorerze

Question

Mam bardzo specyficzny problem, ponieważ próbuję stworzyć nawigację, która ma kąty używając czysto CSS bez obrazów lub javascript. Zorientowałem się, że działa idealnie, ale problem, który napotykam, polega na tym, że IE 9 i Chrome wyglądają inaczej. Mogę obaj pracować, zmieniając marginesy pseudo elementów, ale wolałbym, aby jedno rozwiązanie działało w obu. Jeśli ktokolwiek może zrozumieć, dlaczego marginesy są różne i dać mi jedno rozwiązanie CSS do pracy w obu przeglądarkach, byłoby świetnie. W przeciwnym razie będę musiał dodać oddzielną klasę dla IE i zmusić ją do pracy przy użyciu oddzielnego wpisu CSS.

Oto jsfiddle pracować arrow-nav

Oto 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> 

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

Można to naprawić za pomocą pozycjonowania bezwzględnego na elementach pseudo. Aby to działało poprawnie, ustaw pozycję względną (co spowoduje, że elementy umieszczone absolutnie w niej będą względne względem li). Następnie aktualizowania położenia elementów pseudo używać left zamiast 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

musisz określić pozycję dla elementów (na przykład top i left wartości). I z jakiegoś powodu, którego nie w pełni zrozumieć - aby dodać position: relative do li (nie ul):

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