IE11模糊的右边缘的DIV与border-radius [英] IE11 blurry right hand edge of DIV with border-radius
问题描述
我在IE 11中有一个问题（在Windows 7上），其中指定了border-radius的DIV的右边缘看起来模糊。看看这个例子： -
<！DOCTYPE HTML>
< html lang =en>
< head>
< title>测试页< / 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>测试< / h2>
< / div>
< / div>
< / div>
< / body>
< / html>
一开始，页面通常看起来不错。但是，调整页面大小以使垂直滚动条开启（通过使页面足够小以进入Black DIV部分）。您应该注意到蓝色和绿色框的右边缘已经变得模糊。
注意：有时页面模糊，开始时，启用垂直滚动条，它只是似乎取决于IE页面的大小。
如果我摆脱border-radius它修复了问题。如果我摆脱margin-left和margin-right汽车的所以页面在左边对齐它修复了问题。因此，它似乎是一个指定了border-radius的集中页面的组合。
任何人都知道如何解决这个问题？我假设它是一个IE 11的错误，因为它工作正常在IE 10，IE 9，Chrome，Firefox。
JSFIDDLE：），所以在一个灵活的布局中，尺寸不能保证，最佳做法是应用 border：1px solid #rrggbb; p>
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...
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;"
这篇关于IE11模糊的右边缘的DIV与border-radius的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
