幽灵般的“边界”在IE11和Edge中显示为带有边界半径

Question

In IE11 and Edge (on Windows 10), the following HTML/CSS displays a strange, transparent border where there shouldn't be. 在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 (You may need to resize the window vertically to see the 'border' fade in and out in JSFiddle — which is even stranger.) JSFiddle （您可能需要垂直调整窗口的大小，以查看“边界”在JSFiddle中淡入和淡出-甚至更奇怪。）

The most interesting part is that the issue seems to be caused by border-radius . 最有趣的部分是该问题似乎是由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. 如果我删除一些其他元素（例如.menu div），它也会消失，但这不是一个选择，因为我希望不必弄乱有此问题的网站的结构。

I've found mentions of background-clip: content-box or padding-box as a solution, but it doesn't seem to work here. 我发现提到了background-clip: content-box或padding-box作为解决方案，但在这里似乎不起作用。

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. 还要注意的是，在尝试减少演示的大小时，我最终得到了一个代码，该代码在JSFiddle中显示了边框，但没有在纯HTML文件中显示。 This is the smallest I could get to display the 'border' both inside JSFiddle and a plain HTML file. 这是我可以在JSFiddle和普通HTML文件中显示“边界”的最小尺寸。

Found the bug in EDGE's Platform Issues but still would like to find a workaround... 在EDGE的平台问题中 找到了该错误 ，但仍希望找到一种解决方法...

Answer 1

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). 看起来IE正在渲染透明边框以显示border-radius但是在“层”上比应选择的位置更深地选择了“背景”颜色（在我的示例中，使用红色而不是白色）。

So I went with workarounds... 所以我采取了解决方法...

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 . 我的解决方法是， 将另一个元素的background-color设置为比其更靠后的border-radius ，而另一个设置一个与元素的背景颜色相同的实际border 。

幽灵般的“边界”在IE11和Edge中显示为带有边界半径

问题描述

1 个解决方案

解决方案1
0 2017-12-18 13:26:18

幽灵般的“边界”在IE11和Edge中显示为带有边界半径

问题描述

1 个解决方案

解决方案1 0 2017-12-18 13:26:18

解决方案1
0 2017-12-18 13:26:18