IE11 blurry right hand edge of DIV with border-radius

I have a problem in IE 11 (On Windows 7) where the right hand edge of a DIV that has a border-radius specified 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 off, the page usually looks fine. However, resize the page so that the vertical scrollbar comes on (by making the page small enough to go into the Black DIV section). You should then notice that the right hand edge of both the Blue and Green boxes have gone blurry.

Note: Sometimes the page is blurry to begin with and goes sharp when you enable the vertical scrollbar, it just seems to depend on the size of the IE page.

If I get rid of border-radius it fixes the problem. If I get rid of the margin-left and margin-right auto's so the page is aligned on the left it fixes the problem. So it seems to be a combination of centred pages with a border-radius specified.

Anyone know how to solve this issue? I am assuming it is an IE 11 bug as it works fine in IE 10, IE 9, Chrome, Firefox.

JSFIDDLE: http://jsfiddle.net/UjpSe/

I've since tried this on a 3rd IE 11 machine on Windows 7 and it only goes wrong on 2 of the machines. So not sure if it might be a setting/graphic card related.

The JSFIDDLE above I can get it to go wrong with, as long as the Window is sufficiently sized so that the DIV is centred in the page and you can enable the vertical scrollbar with resizing.

Edit: Images added as requested. I've resized the page down from 600px wide to 300px to fit in Stack Overflow. First image has blurry right edge...

Exact same page does not have a right blurry edge when page is resized to not have a scrollbar...

Gabe

Without a properly specified border, IE11 blurs the right edge/border of the element. You can update your CSS to include border: 1px solid #rrggbb; or border: 0; per eh1160's comment below.

Important Note: vertically or horizontally centering a DIV inside a container with odd-numbered height/widths will create a fuzzy edge even with border: 0; (see: http://codepen.io/anon/pen/xbvXNa) so in a flexible layout where dimensions are not guaranteed, best practice is to apply border: 1px solid #rrggbb;"

来源：https://stackoverflow.com/questions/20348947/ie11-blurry-right-hand-edge-of-div-with-border-radius

标签

css

internet-explorer-11