1 pixel unexpected margin in Edge browser

Question

I have an unexpected 1px margin under a div located in a fixed container. This issue only occurs in Edge (possibly in IE). After some testing, I was able to reproduce the error with examples with empty bones.

This snapshot, which you can reproduce below, consists of 3 square divs inside a fixed div. Firefox

In Edge, you can “fix” this problem by disabling the top: 50% property in the div container or disabling border-*-right-radius: 6px in the div inside. Naturally, this is not a correction, because I need both of these properties for the effective implementation of this project.

How can i fix this? I tried to add borders of the same color as the background, but the background is not opaque.

Edit: if you don't see it right away in IE / Edge, try selecting the div container and slowly increase the value of the top property. In IE11, changing it from 5% to 6% already made the problem obvious again.

 .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 using a border for the parent div: http://jsfiddle.net/gtf0fa8n/1/

The border radius on the parent does not slow down the display of internal divs in 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

Just give boxshadow 1px with the same color below.

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