边缘浏览器中出现意外的1像素边距

我在居住在固定容器中的div下有意想不到的1px边距。这个问题只发生在边缘（可能在IE中）。经过一些测试后，我可以用一个简单的骨头例子重现这个错误。边缘浏览器中出现意外的1像素边距

这张图片，您可以重现运行下面的代码片段，由固定格内的3个方形div组成。火狐

在边缘，您可以通过禁用容器DIV财产top: 50%，或在里面的div禁用border-*-right-radius: 6px“解决”这个问题。当然，这不是一个修复，因为我需要这些属性来有效地实现这个设计。

我该如何解决这个问题？我尝试添加与背景颜色相同的边框，但背景不是不透明的。

编辑：如果您在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>

来源

2015-09-15 ecc

IE11中不可重现;看起来像是Edge。 – TylerH

不在FF中复制。但是，您可以使用.box之前或之后的元素：在{}之后，并将绝对东西放在该容器的顶部。 – RooWM

感谢您的测试，但我只是自己测试了一下，IE浏览器也一样，但稍微不太明显。检查我的更新。 – ecc

尝试使用接壤父格：对父http://jsfiddle.net/gtf0fa8n/1/

边境半径不刹内的div渲染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); 
}

来源

2015-09-15 15:06:14 IonDen

你可以把代码内联而不是小提琴吗？更好的网站 – ecc

然后看看悬停效果如何打破它！我认为真正的解决方案是等待Edge的更新版本...大约5年 – musefan

@ecc它是内联的。 – IonDen

只要给boxshadow 1px的的底部颜色相同。

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

来源

2016-03-24 07:30:32 Ammar

边缘浏览器中出现意外的1像素边距

回答

相关问题