幽灵般的“边界"在IE11和Edge中显示为带有边界半径 [英] Ghostly 'border' appears with border-radius in IE11 and Edge
问题描述
在IE11和Edge(在Windows 10上)中，以下HTML/CSS在不应有的地方显示了一个奇怪的透明边框.
In IE11 and Edge (on Windows 10), the following HTML/CSS displays a strange, transparent border where there shouldn't be.
<!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 (您可能需要垂直调整窗口大小可以在JSFiddle中看到边界"淡入淡出-甚至更陌生.)
JSFiddle (You may need to resize the window vertically to see the 'border' fade in and out in JSFiddle — which is even stranger.)
最有趣的部分是问题似乎是由border-radius引起的.如果我删除它，边框"就消失了.如果我删除一些其他元素(例如.menu div)，它也会消失，但这是一个较小的选择，因为我宁愿不必弄乱有此问题的网站的结构.
The most interesting part is that the issue seems to be caused by border-radius. If I remove it, the 'border' is gone. It will also go away if I remove some other element (the .menu div for example), but that is less of an option since I would prefer not having to mess with the structure of the site having this problem.
我已经找到了background-clip: content-box或padding-box作为解决方案的提法，但在这里似乎不起作用.
I've found mentions of background-clip: content-box or padding-box as a solution, but it doesn't seem to work here.
还要注意的是，当试图减小演示的大小时，我最终得到了一个代码，该代码在JSFiddle中显示了边框，但没有在纯HTML文件中显示.这是我在JSFiddle和纯HTML文件中显示边框"的最小尺寸.
Also of note, while trying to reduce the size of my demonstration, I ended up with a code that showed the border in JSFiddle, but not in a plain HTML file. This is the smallest I could get to display the 'border' both inside JSFiddle and a plain HTML file.
发现了漏洞在EDGE的平台问题，但仍然希望找到解决方法...
Found the bug in EDGE's Platform Issues but still would like to find a workaround...
推荐答案
似乎IE正在渲染透明边框以显示border-radius，但在层"颜色比所需的层更深的地方(在我的示例中) ，使用红色而不是白色).
It looks like IE is rendering a transparent border to display the border-radius but picks the 'background' color further down the layers than it should (in my sample, using red instead of white).
所以我采用了解决方法...
So I went with workarounds...
在我的实际页面上，有两个元素存在此错误.对于我，一种解决方法是将另一个元素的background-color设置为使用border-radius 进一步位于另一个元素的后面，而另一个将设置为与元素背景相同颜色的实际border .
On my actual page, two elements are having this bug. For one my workaround was to set the background-color of another element further behind the one with border-radius and for the other to set an actual border the same color as the element's background.
这篇关于幽灵般的“边界"在IE11和Edge中显示为带有边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
