在IE11和Edge中出现带有border-radius的Ghostly'border'

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'淡入和淡出 - 这甚至更奇怪。）

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

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

另外值得注意的是，在尝试减小演示的大小时，我最终得到了一个代码，该代码在JSFiddle中显示了边框，但不是在纯HTML文件中。这是我在JSFiddle和纯HTML文件中显示“边框”的最小值。

发现了EDGE的Platform Issues中的错误，但仍想找到解决方法......

Answer 1

看起来IE正在呈现一个透明的边框来显示border-radius，但是在图层中选择的“背景”颜色应该比它应该的更多（在我的样本中，使用红色而不是白色）。

所以我选择了变通方法......

在我的实际页面上，有两个元素有这个bug。我的解决方法是将另一个元素的background-color设置在border-radius的另一个元素后面，另一个元素将实际的border设置为与元素背景相同的颜色。

在IE11和Edge中出现带有border-radius的Ghostly'border'

问题描述投票：0回答：1

1个回答

最新问题

在IE11和Edge中出现带有border-radius的Ghostly'border'

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1