IE11 размытый правый край DIV с радиусом границы
У меня проблема в IE 11 (в Windows 7), где правый край DIV с заданным радиусом границы выглядит размытым. Посмотрите на этот пример:
<!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>
Для начала, страница обычно выглядит нормально. Однако измените размер страницы, чтобы появилась вертикальная полоса прокрутки (сделав страницу достаточно маленькой, чтобы перейти в раздел Black DIV). Затем вы должны заметить, что правый край синего и зеленого полей стал размытым.
Примечание. Иногда страница размыта с самого начала и становится резкой, когда вы включаете вертикальную полосу прокрутки, кажется, что она зависит от размера страницы IE.
Если я избавлюсь от border-radius, это решит проблему. Если я избавлюсь от полей margin-left и margin-right, то страница будет выровнена по левому краю, это решит проблему. Так что, кажется, это комбинация центрированных страниц с заданным радиусом границы.
Кто-нибудь знает, как решить эту проблему? Я предполагаю, что это ошибка IE 11, поскольку она отлично работает в IE 10, IE 9, Chrome, Firefox.
JSFIDDLE:http://jsfiddle.net/UjpSe/
С тех пор я попробовал это на 3-й машине IE 11 на Windows 7, и это только работает на 2 из машин. Поэтому не уверен, может ли это быть связано с настройкой / графической картой.
JSFIDDLE выше, я могу заставить его ошибаться, если окно имеет достаточный размер, так что DIV центрируется на странице, и вы можете активировать вертикальную полосу прокрутки с изменением размера.
Редактировать: Изображения добавляются по запросу. Я уменьшил размер страницы с 600 до 300 пикселей, чтобы соответствовать переполнению стека. Первое изображение имеет размытый правый край ...
Точно такая же страница не имеет правильного размытого края, когда размер страницы не имеет полосы прокрутки ...