予期しないエッジブラウザのピクセルマージン

Question

固定コンテナにあるdivの下に予期しない1ピクセルの余白があります。この問題はEdgeでのみ発生します（おそらくIEでも）。いくつかのテストの後、私は裸の骨の例でバグを再現することができました。

以下のスニペットを再現できるこの画像は、固定div内に3つの四角形のdivで構成されています。 Firefoxの

エッジでは、あなたが、またはその内側のdivにborder-*-right-radius: 6pxを無効にすることで、コンテナのdiv内のプロパティtop: 50%を無効にするのいずれかによって、この問題を「解決」することができます。もちろん、これは修正ではありません。この設計を効果的に実装するには、これらの両方のプロパティが必要です。

どうすればこの問題を解決できますか？背景と同じ色の枠線を追加しようとしましたが、背景が不透明ではありません。

編集：すぐにIE/Edgeで表示されない場合は、divというコンテナを選択し、topプロパティの値をゆっくりと上げてみてください。 IE11では、これを5％から6％に変更すると、すでに問題が明らかになりました。

.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

親のdivに境界線を使用してみてください：親のhttp://jsfiddle.net/gtf0fa8n/1/

ボーダー半径は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

でのレンダリングブレーキ内部のdiv要素は、ちょうど1ピクセルのboxshadowを与えるものではありません下に同じ色で。

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