I have a problem in IE 11 (on Windows 7) where the right edge of a DIV having a given border radius looks blurry. Take a look at this example: -
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Test Page</title>
<style>
body {
background-color: red;
}
.Container {
background-color: black;
margin-left: auto;
margin-right: auto;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
min-height: 300px;
width: 600px;
}
.Surround {
background-color: lightgreen;
border-radius: 7px;
float: left;
padding: 6px;
width: 588px;
}
.Inner {
background-color: blue;
border-radius: 7px;
color: white;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="Container">
<div class="Surround">
<div class="Inner">
<h2>Test</h2>
</div>
</div>
</div>
</body>
</html>
To start, the page looks fine. However, resize the page so that a vertical scrollbar appears (by making the page small enough to go to the Black DIV section). Then you should notice that the right edge of both the blue and green boxes is blurred.
Note. Sometimes a page is blurry and starts sharp when you turn on the vertical scroll bar, it just depends on the IE page size.
, . margin-left margin-right auto, , . , .
- , ? , IE 11, IE 10, IE 9, Chrome, Firefox.
JSFIDDLE: http://jsfiddle.net/UjpSe/
IE 11 Windows 7, 2 . , / .
JSFIDDLE , , DIV , .
: . 600 300 , Stack Overflow. ...
, ...