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

Question

在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 （您可能需要垂直调整窗口的大小，以查看“边界”在JSFiddle中淡入和淡出-甚至更奇怪。）

最有趣的部分是该问题似乎是由border-radius引起的。 如果我删除它，“边框”就消失了。 如果我删除一些其他元素（例如.menu div），它也会消失，但这不是一个选择，因为我希望不必弄乱有此问题的网站的结构。

我发现提到了background-clip: content-box或padding-box作为解决方案，但在这里似乎不起作用。

还要注意的是，在尝试减少演示的大小时，我最终得到了一个代码，该代码在JSFiddle中显示了边框，但没有在纯HTML文件中显示。 这是我可以在JSFiddle和普通HTML文件中显示“边界”的最小尺寸。

在EDGE的平台问题中 找到了该错误 ，但仍希望找到一种解决方法...

Answer 1

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

所以我采取了解决方法...

在我的实际页面上，有两个元素存在此错误。 我的解决方法是， 将另一个元素的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