CSS擬似要素：前と後の動作はInternet Explorerで異なって

Question

画像やJavaScriptなしで純粋にCSSを使用している角度を持つナビゲーションを作成しようとしているので、非常に具体的な問題があります。私はそれが完全に動作するようにそれを考え出しましたが、私が遭遇する問題は、IE 9とChromeが異なって見えるということです。擬似要素のマージンを変更することで両方を動作させることができますが、両方で動作する単一のソリューションを好むでしょう。誰がなぜマージンが異なるのかを理解できれば、両方のブラウザでうまくいくような単一のCSSソリューションを私に与えることができます。さもなければ私はIEのための別のクラスを追加し、それが別々のCSSのエントリを使用して動作するように強制する必要があります。ここで

はここ arrow-nav

で動作するように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 jsfiddleされている

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

あなたは、擬似要素の絶対位置を使用してこの問題を解決することができます。これを正しく動作させるには、ul liの位置を相対位置に設定します（これにより、絶対的に配置された要素がliに対して相対的になります）。その後、代わりにmargin-leftの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

あなたは一例topための要素（のための位置を指定する必要があり、 left値）。そして、私は完全には理解していないいくつかの理由のために - li（ないul）にposition: relativeを追加する：

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