I encountered an unusual issue in IE11 and Edge (on Windows 10) where a strange, transparent border appears in the HTML/CSS code.
<!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>
Here's a JSFiddle link (You might need to resize the window vertically to see the strange 'border' effect in action.)
The issue seems to be related to the border-radius. Removing it makes the border disappear. I've also tried using background-clip: content-box and padding-box as suggested solutions, but they didn't work.
While trying to simplify my demonstration code, I noticed that the border appeared in JSFiddle but not in a standalone HTML file. This is the smallest code snippet that consistently displays the 'border' issue.
I identified the bug in Microsoft Edge's Platform Issues, but I'm still looking for a workaround...