Fatal编程技术网
  • css/
  • Css IE11边界半径为的DIV右侧边缘模糊

Css IE11边界半径为的DIV右侧边缘模糊

css

Css IE11边界半径为的DIV右侧边缘模糊,css,internet-explorer-11,Css,Internet Explorer 11,我在IE11（在Windows7上）中遇到了一个问题，指定了边界半径的DIV的右边缘看起来很模糊。看看这个例子：- <!DOCTYPE HTML> <html lang="en"> <head> <title>Test Page</title> <style> body { background-color: red; } .Contai

我在IE11（在Windows7上）中遇到了一个问题，指定了边界半径的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>


测试页
身体{
背景色：红色；
}
.集装箱{
背景色：黑色；
左边距：自动；
右边距：自动；
左侧填充：25px；
右边填充：25px；
填充顶部：10px；
最小高度：300px；
宽度：600px；
}
.环绕{
背景颜色：浅绿色；
边界半径：7px；
浮动：左；
填充：6px；
宽度：588px；
}
.内部{
背景颜色：蓝色；
边界半径：7px；
颜色：白色；
浮动：左；
宽度：100%；
}
试验
首先，页面通常看起来很好。但是，调整页面大小以打开垂直滚动条（通过使页面足够小以进入黑色DIV部分）。然后，您应该注意到蓝色和绿色框的右侧边缘都变得模糊

注意：有时页面开始时很模糊，当您启用垂直滚动条时会变得尖锐，这似乎取决于IE页面的大小

如果去掉边界半径，问题就解决了。如果我去掉左边距和右边距自动，这样页面就可以在左边对齐，这就解决了问题。因此，它似乎是一个组合的居中页面与边界半径指定

有人知道如何解决这个问题吗？我假设这是一个IE11错误，因为它在IE10、IE9、Chrome和Firefox中工作良好

JSFIDDLE：

此后，我在Windows7上的第三台IE11机器上尝试了此功能，但只在其中两台机器上出错。因此，不确定是否与设置/图形卡相关

上面的JSFIDDLE可能会出错，只要窗口的大小足够大，DIV位于页面中央，并且可以通过调整大小来启用垂直滚动条

编辑：按要求添加图像。我已经将页面大小从600px降到300px，以适应堆栈溢出。第一张图像的右边缘模糊

当页面大小调整为没有滚动条时，完全相同的页面没有右模糊边缘

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


重要注意事项：在容器内垂直或水平居中放置高度/宽度为奇数的DIV将创建模糊边缘，即使边界为
0（请参见：）因此，在无法保证尺寸的灵活布局中，最佳做法是应用
边框：1px实心#rrggbb；“
如果没有正确指定的边框，IE11会模糊元素的右边缘/边框。根据下面的eh1160注释，您可以更新CSS以包括
边框：1px实心35; rrggbb；
或
边框：0；


重要提示：容器内的DIV垂直或水平居中，高度/宽度为奇数，即使边界为0；
（请参见：）也会产生模糊边缘，因此在无法保证尺寸的灵活布局中，最佳做法是应用
边界：1px实心#rrggbb；”
IE本身是一个模糊的概念：在IE10中无法复制它。在IE11和Win7中，它看起来不错。你的缩放级别是0吗？尝试CTRL-0将其设置为“无缩放”。这只是一个IE 11错误，是的，我将缩放级别设置为100%。如果我放大，问题就会消失。有时有点难看，但在我用IE11试过的两台机器上，绿色和蓝色框的右边缘模糊。如果我设置为100%，拍摄一张截图，然后用MS Paint放大，它会清楚地显示问题。给我们看你的截图，给我们看模糊的边缘。我可以确认
边界半径
被窃听了，但我看不出你在解释什么。这是一个模糊的概念本身：在IE10中无法复制它。在IE11和Win7中，它看起来不错。你的缩放级别是0吗？尝试CTRL-0将其设置为“无缩放”。这只是一个IE 11错误，是的，我将缩放级别设置为100%。如果我放大，问题就会消失。有时有点难看，但在我用IE11试过的两台机器上，绿色和蓝色框的右边缘模糊。如果我设置为100%，拍摄一张截图，然后用MS Paint放大，它会清楚地显示问题。给我们看你的截图，给我们看模糊的边缘。我可以确认
边界半径
被窃听了，但我看不出你在解释什么Hanks，我测试了这个，效果不错，但你不得不这么做似乎有点奇怪。当您说“正确指定的边界”时，意味着您需要有一个边界才能使用边界半径。但其他主流浏览器并不坚持这一点，IE 10也不坚持。对我来说，这是一个错误。必须指定边框会导致各种各样的问题，特别是当您想要使用100%宽度时，这非常烦人。感谢您提供的信息。@cw\u dev如果您认为这是一个bug，您应该向开发团队提供一份bug报告。另外，如果您不想让边框增加元素的宽度，请在该元素上使用
框大小：border box
。谢谢，我已经测试过了，效果不错，但您不得不这样做似乎有点奇怪。当您说“正确指定的边界”时，意味着您需要有一个边界才能使用边界半径。但其他主流浏览器并不坚持这一点，IE 10也不坚持。对我来说，这是一个错误。必须指定边框会导致各种排序问题，特别是当您希望使用100%的宽度时，因为它很高