Unerwarteter 1-Pixel-Rand im Edge-Browser

Question

Ich habe einen unerwarteten 1px-Rand unter einem div, der sich in einem festen Container befindet. Dieses Problem tritt nur in Edge auf (möglicherweise auch in IE). Nach einigen Tests konnte ich den Fehler mit einem nackten Knochenbeispiel reproduzieren.

Dieses Bild, das Sie reproduzieren können, wenn Sie den Ausschnitt unten ausführen, besteht aus 3 quadratischen divs innerhalb eines festen div.

Firefox

In Rande, können Sie "reparieren" dieses Problem, indem entweder die Eigenschaft top: 50% im Container div deaktivieren oder durch border-*-right-radius: 6px in der divs hinein zu deaktivieren. Das ist natürlich keine Lösung, denn ich brauche beide Eigenschaften, um dieses Design effektiv umzusetzen.

Wie kann ich das beheben? Ich habe versucht, Rahmen die gleiche Farbe wie der Hintergrund hinzuzufügen, aber der Hintergrund ist nicht undurchsichtig.

Edit: Wenn Sie es nicht sofort in IE/Edge sehen können, versuchen Sie, den Container div auszuwählen und langsam den Wert der top-Eigenschaft zu erhöhen. In IE11 machte das Ändern von 5% auf 6% das Problem bereits wieder offensichtlich.

.box { 
 
    background-color: rgba(0,0,0,0.15); 
 
    height: 70px; 
 
    line-height: 70px; 
 
    text-align: center; 
 
    border-right: 1px solid rgba(0,0,0,0.2); 
 
} 
 
.box:hover { 
 
    background-color: rgba(50,50,100,0.15); 
 
} 
 
.box:first-child { 
 
    border-top-right-radius: 6px; 
 
    border-top: 1px solid rgba(0,0,0,0.2); 
 
} 
 
.box:last-child { 
 
    border-bottom-right-radius: 6px; 
 
    border-bottom:1px solid rgba(0,0,0,0.2); 
 
} 
 

 
.main { 
 
    width: 70px; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 5%; 
 
}

<div class="main"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 1

Try Grenze auf Eltern div zu verwenden: http://jsfiddle.net/gtf0fa8n/1/

Border Radius auf Eltern nicht innere divs Bremse in IE-Rendering

.main { 
    border: 1px solid rgba(0, 0, 0, 0.5); 
    border-left: 0; 
    border-radius: 0 6px 6px 0; 
    overflow: hidden; 
} 

.box { 
    background-color: rgba(0, 0, 0, 0.3); 
    height: 70px; 
    line-height: 70px; 
    text-align: center; 
} 
.box:hover { 
    background-color: rgba(50,50,100,0.15); 
} 

Answer 2

Gerade boxshadow von 1px geben mit gleicher Farbe am Boden.

box-shadow: #2a2e37 0px 1px 0px;