html - CSS 疑似要素 :before と :after は Internet Explorer で異なる動作をする

Question

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

これは、 arrow-navで動作する jsfiddle です。

ここに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;
}