Seltsame 1px Offset in MSIE für: nach und: vor

Question

Ich versuche, ein Tag-System mit "negativen Grenzradius" zu bauen (mir fehlt eine bessere Beschreibung).

Ich benutze :after und :before, um einige falsche Grenze die "Biegungen außerhalb" zu erstellen. Es hat gut funktioniert, aber es gibt ein seltsames Verhalten in MSIE. Ich habe top:5px auf die :after und :before, aber in IE Ich muß ein zusätzliches Pixel (Ergebnisse in top: 6px) hinzufügen (siehe in IE8: die horizontalen Linien links und rechts nicht sichtbar sein) Normalerweise

Was könnte den Sein?

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

Ich schaffte es, den Fehler selbst zu bekommen. Es war die vertikale Ausrichtung: Mitte mit der: nach und: vor, die die 1px Offset verursacht

Answer 2

Die weißen Ränder in Firefox und Opera zu sehen sind, nicht nur IE. Sie fügen sich jedoch in den Grenzradius ein.

Es ist leicht zu sehen bei http://jsfiddle.net/CrxQG/ und http://jsfiddle.net/CrxQG/1/ mit schwarzen Randfarbe bzw. Rand-Radius entfernt.