Nieoczekiwany margines 1 piksela w przeglądarce krawędzi

Question

Mam nieoczekiwany margines 1px pod elementem div znajdującym się w stałym kontenerze. Ten problem występuje tylko w Edge (prawdopodobnie również w IE). Po kilku testach udało mi się odtworzyć błąd za pomocą gołego szkieletu.

To zdjęcie, które można odtworzyć, wykonując poniższy fragment, składa się z 3 kwadratowych elementów div wewnątrz ustalonego elementu div. Firefox

W Edge, można „naprawić” ten problem, albo wyłączyć właściwość top: 50% w div kontenera, lub wyłączając border-*-right-radius: 6px w div wewnątrz niego. Oczywiście nie jest to poprawka, ponieważ obie te właściwości są potrzebne do skutecznego wdrożenia tego projektu.

Jak mogę to naprawić? Próbowałem dodać krawędzie w tym samym kolorze co tło, ale tło nie jest nieprzezroczyste.

Edytuj: Jeśli nie widzisz go od razu w IE/Edge, spróbuj wybrać kontener div i powoli zwiększ wartość właściwości top. W IE11 zmiana z 5% na 6% już sprawiła, że ​​problem znów był oczywisty.

.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

spróbuje użyć granicę na macierzystej div: promień http://jsfiddle.net/gtf0fa8n/1/

Granicznej na rodzica nie hamuje wewnętrzne div renderowania w IE

.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

Dajcie boxshadow z 1px z tym samym kolorem na dole.

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