CSS Pseudo-elementi: prima e: dopo il lavoro differentemente in Internet Explorer

Question

Ho un problema molto specifico mentre sto cercando di creare una navigazione che abbia angoli usando puramente CSS senza immagini o javascript. L'ho capito in modo che funzioni perfettamente, ma il problema che sto incontrando è che IE 9 e Chrome sembrano diversi. Posso lavorare entrambi cambiando i margini degli pseudo elementi, ma preferirei che una soluzione singola funzionasse in entrambi. Se qualcuno riesce a capire perché i margini sono diversi e mi dà una soluzione CSS unica per lavorare su entrambi i browser sarebbe fantastico. Altrimenti dovrò aggiungere una classe separata per IE e forzarla a funzionare usando una voce CSS separata.

Ecco il jsfiddle di lavorare con arrow-nav

Ecco l'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> 

Il 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

È possibile risolvere questo problema utilizzando il posizionamento assoluto sugli elementi pseudo. Per fare in modo che funzioni correttamente, imposta la posizione di ul li in relativa (che farà sì che gli elementi posizionati in modo assoluto all'interno siano relativi al li). Quindi, aggiornare la posizione degli elementi pseudo da utilizzare al posto di leftmargin-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

È necessario specificare la posizione per gli elementi (ad esempio top e Valori left). E per qualche ragione, che io non comprendo pienamente - di aggiungere position: relative al li (non il ul):

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