【发布时间】：2016-04-18 16:27:48
【问题描述】：
我在 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 页面的大小。
如果我去掉边界半径，它可以解决问题。如果我去掉左边距和右边距自动，使页面在左边对齐，它可以解决问题。所以它似乎是居中页面与指定边框半径的组合。
有人知道如何解决这个问题吗？我假设它是一个 IE 11 错误，因为它在 IE 10、IE 9、Chrome、Firefox 中运行良好。
JSFIDDLE：http://jsfiddle.net/UjpSe/
我已经在 Windows 7 上的第三台 IE 11 机器上尝试过这个，它只在 2 台机器上出错。所以不确定它是否可能与设置/显卡相关。
上面的 JSFIDDLE 我可以让它出错，只要 Window 的大小足够大，以便 DIV 在页面中居中，并且您可以通过调整大小启用垂直滚动条。
编辑：按要求添加图像。我已将页面大小从 600px 宽调整为 300px 以适应 Stack Overflow。第一张图片的右边缘模糊...
当页面大小调整为没有滚动条时，完全相同的页面没有右模糊边缘...
【问题讨论】：
-
IE 本身就是一个模糊的概念：D
-
无法在 IE10 中重现
-
在 IE11 和 Win7 中看起来不错。你的缩放级别是 0 吗？尝试 CTRL-0 将其设置为不缩放。
-
这只是一个 IE 11 错误，是的，我将缩放级别设置为 100%。如果我放大问题就会消失。有时有点难以看清，但在我试过的两台 IE 11 机器上，绿色和蓝色框的右边缘很模糊。如果我设置为 100% 并截取屏幕截图，然后使用 MS Paint 放大，它会清楚地显示问题。
-
给我们看你的截图，给我们看模糊的边缘。我可以确认
border-radius被窃听了，但我看不出你在解释什么