Ghostly 'border' appears with border-radius in IE11 and Edge

问题

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 (You may need to resize the window vertically to see the 'border' fade in and out in JSFiddle — which is even stranger.)

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.

I've found mentions of background-clip: content-box or padding-box as a solution, but it doesn't seem to work here.

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.

Found the bug in EDGE's Platform Issues but still would like to find a workaround...

回答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).

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.

来源：https://stackoverflow.com/questions/47839901/ghostly-border-appears-with-border-radius-in-ie11-and-edge

标签

html

css

internet-explorer-11

microsoft-edge