I have read other questions similar to mine on this forum, however there is no suitable fix for the issue I am experiencing. This issue did NOT occur in IE9 or IE10. I believe this to be a bug with IE11 and hope it will be fixed soon.
The problem is the line showing below the current menu item, which should not be there. (View in other browsers to compare.)
I have found if I remove the font-family and font-size properties, the line disappears. It also partially disappears if Iremove only the line-height property.
Note: Removing the properties in IE11 using the F12 tools, doesn't give the same results as editing the actual HTML file!
<!DOCTYPE html>
<html>
<head>
<title>Problem with border-radius in IE 11</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
line-height: 1.5;
font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;
font-size: 15px;
background-color: #eee;
}
ul {
display: block;
background-color: #00984E;
text-align: center;
list-style: none outside none;
}
li {
display: inline-block;
}
a {
border-bottom: 0;
padding: 10px 20px;
}
a, a:visited {
background-color: #00984E;
color: #FFFFFF;
display: block;
padding: 10px;
text-decoration: none;
}
li.current a {
background-color: #FDFDFD;
color: #00984E;
border-radius: 5px 5px 0 0;
text-decoration: none;
}
</style>
</head>
<body>
<h1>"border-radius" causing background-bleed in IE 11</h1>
<nav role="navigation" >
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>