幽靈般的“邊界”在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