Question

我在IE 11（Windows 7）中遇到问题，其中指定了border-radius的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>

首先，页面看起来很好。但是，调整页面大小以使垂直滚动条显示（通过使页面足够小以进入黑色DIV部分）。然后你应该注意到蓝色和绿色框的右边缘已经变得模糊了。

注意：有时页面开始模糊并且在启用垂直滚动条时变得清晰，它似乎取决于IE页面的大小。

如果我摆脱border-radius，它可以解决问题。如果我摆脱了margin-left和margin-right auto，那么页面在左边对齐就可以解决问题。所以它似乎是指定了border-radius的居中页面的组合。

任何人都知道如何解决这个问题？我假设它是IE 11的错误，因为它在IE 10，IE 9，Chrome，Firefox中运行良好。

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

我已经在Windows 7上的第3台IE 11机器上尝试了这个，但它只在2台机器上出错了。所以不确定它是否与设置/图形卡相关。

上面的JSFIDDLE我可以让它出错，只要Window的大小足以让DIV在页面中居中，你可以通过调整大小来启用垂直滚动条。

编辑：按要求添加图片。我已将页面从600px宽调整为300px以适应Stack Overflow。第一张图片边缘模糊......

Blurry

当页面调整为没有滚动条时，完全相同的页面没有正确的模糊边缘...

Not Blurry

Answer 1

如果没有正确指定的边框，IE11会模糊元素的右边缘/边框。您可以根据下面的eh1160评论更新您的CSS以包含border: 1px solid #rrggbb;或border: 0;。

重要提示：将DIV垂直或水平居中于具有奇数高度/宽度的容器内，即使使用border: 0;也会产生模糊边缘（请参阅：http://codepen.io/anon/pen/xbvXNa）因此，在不保证尺寸的灵活布局中，最佳做法是应用border: 1px solid #rrggbb;"

IE11模糊右边缘的DIV与边界半径

1 个答案: