IE11 borde derecho borroso de DIV con radio de borde
Tengo un problema en IE 11 (en Windows 7) donde el borde derecho de un DIV que tiene un radio de borde especificado se ve borroso. Echale un vistazo a éste ejemplo:-
<!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>
Para empezar, la página por lo general se ve bien. Sin embargo, cambie el tamaño de la página para que se active la barra de desplazamiento vertical (haciendo que la página sea lo suficientemente pequeña como para entrar en la sección DIV negra). A continuación, debe notar que el borde derecho de las casillas Azul y Verde se han vuelto borrosas.
Nota: a veces, la página está borrosa para comenzar y se vuelve nítida cuando habilita la barra de desplazamiento vertical, parece depender del tamaño de la página de IE.
Si me deshago de radio de borde, soluciona el problema. Si me deshago del margen izquierdo y del margen derecho, entonces la página se alinea a la izquierda para solucionar el problema. Así que parece ser una combinación de páginas centradas con un radio de borde especificado.
Alguien sabe como resolver este problema? Supongo que es un error de IE 11, ya que funciona bien en IE 10, IE 9, Chrome, Firefox.
JSFIDDLEhttp://jsfiddle.net/UjpSe/
Desde entonces, he intentado esto en una 3ra máquina IE 11 en Windows 7 y solo funciona mal en 2 de las máquinas. Así que no estoy seguro de si podría ser una configuración / tarjeta gráfica relacionada.
El JSFIDDLE anterior puede fallar, siempre que la Ventana tenga el tamaño suficiente para que el DIV esté centrado en la página y pueda habilitar la barra de desplazamiento vertical con cambio de tamaño.
Edición: Imágenes agregadas según lo solicitado. He cambiado el tamaño de la página desde 600px de ancho hasta 300px para que quepa en Stack Overflow. La primera imagen tiene borde derecho borroso ...
La misma página exacta no tiene un borde borroso derecho cuando la página se redimensiona para no tener una barra de desplazamiento ...