在 IE11 和 Edge(Windows 10 上)中,以下 HTML/CSS 在不应该出现的地方显示奇怪的透明边框。
<!DOCTYPE html><html>
<head>
<style>
body {
background-color:red;
font-size: 10pt;
}
.menu {
background-color: #5f6062;
overflow:hidden; /* To contain floats */
box-sizing: content-box;
}
.right-menu {
float:right;
margin:auto;
padding:0 0 0 20px;
list-style: none;
}
.spacer {
background-color: #ffffff;
height: 20px;
}
.content {
background-color: #ffffff;
border-radius:0 0 10px 10px;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="menu">
<ul class="right-menu">
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="spacer"></div>
<div class="content">
<div class="content-title">There shouldn't be a 'border' above this...</div>
</div>
</body>
</html>
JSFiddle https://jsfiddle.net/9ryf1unw/(您可能需要垂直调整窗口大小在 JSFiddle 中看到“边框”淡入淡出——这更奇怪。)
最有趣的部分是这个问题似乎是由border-radius
。如果我删除它,“边界”就消失了。如果我删除一些其他元素(例如 .menu div),它也会消失,但这不是一个选择,因为我不想弄乱有此问题的网站的结构。
我发现提到了background-clip: content-box
or padding-box
作为解决方案,但它似乎在这里不起作用。
另外值得注意的是,在尝试缩小演示大小时,我最终得到了在 JSFiddle 中显示边框的代码,但在纯 HTML 文件中却没有。这是我可以在 JSFiddle 和纯 HTML 文件中显示“边框”的最小尺寸。
发现错误在 EDGE 中平台问题 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6661381/但仍然想找到解决方法......
看起来 IE 正在渲染一个透明边框来显示border-radius
但选择的“背景”颜色比应有的更靠下(在我的示例中,使用红色而不是白色)。
所以我采取了解决方法......
在我的实际页面上,有两个元素存在此错误。我的解决方法之一是set the background-color
另一个元素比该元素更靠后border-radius
并为另一个设置一个实际的border
与元素背景颜色相同.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)