MSIEの奇妙な1pxオフセット：afterと：before

Question

私は 'negative border radius'（私はより良い説明がない）でタグシステムを構築しようとしています。

私は:afterと:beforeを使用して、いくつかの偽の境界を '外側に曲げる'ように作成します。それはうまくいきましたが、MSIEではいくつかの奇妙な動作があります。

何ができることを：通常、私が:afterと:beforeにtop:5pxを持っているが、IEで、私は、余分なピクセルを追加する必要があります（top: 6pxの結果は）（左に水平線を、右表示すべきではないIE8で参照してください）あれ？

http://jsfiddle.net/rhGZw/3/

<div class="test"><div>foo</div></div> 

---

body { 
    background: gold; 
    margin: 10px; 
} 
.test { 
    display: inline-block; 
    height: 30px; 
    overflow: hidden; 
} 
.test > div { 
    background: white; 
    border-top-left-radius: 5px; 
    border-top-right-radius : 5px; 
    height: 20px; 
    padding: 5px; 
    display: inline-block; 
} 
.test:before { 
    content: ''; 
    width: 5px; 
    height: 20px; 
    position: relative; 
    top: 5px; 
    margin-right: -5px; 
    background: none; 
    border-color: white; 
    border-style: solid; 
    border-width: 0px; 
    border-bottom-width:5px; 
    border-right-width:5px; 
    border-bottom-right-radius: 10px; 
    display: inline-block; 
    vertical-align: middle; 
    z-index: -1; 
} 

.test:after { 
    content: ''; 
    width: 5px; 
    height: 20px; 
    position: relative; 
    top: 5px; 
    margin-left: -5px; 
    background: none; 
    border-color: white; 
    border-style: solid; 
    border-width: 0px; 
    border-bottom-width:5px; 
    border-left-width:5px; 
    border-bottom-left-radius: 10px; 
    display: inline-block; 
    vertical-align: middle; 
    z-index: -1; 
} 

​ 

Answer 1

私は自分でエラーを解決することができました。それは縦に並んでいました：との後ろ：との間に1pxのオフセットが発生しました

Answer 2

白の境界線は、あまりにもFirefoxとOperaでIEだけでなく、表示されます。しかし、それらはborder-radiusに混ざります。

http://jsfiddle.net/CrxQG/とhttp://jsfiddle.net/CrxQG/1/には、黒色の境界線と境界線の半径をそれぞれ削除して表示されます。