IE9在border-radius上没有子像素抗锯齿

Question

我在div上应用了border-radius，结果在IE9中渲染效果很差。 我知道我可能要求的太多了，但这仍然是不应该发生的事情。

向客户解释什么是子像素抗锯齿是非常困难的。

这是我的CSS：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 border-radius: 10px;

Answer 1

我相信我知道问题所在。看起来您在带圆角的元素中使用背景图像。 IE不喜欢这样。如果这确实是造成问题的原因，那么你可以通过添加第二个元素来解决它。

父元素需要具有圆角边和溢出隐藏。子元素获取背景图像。

我只能在IE8的Windows 8发布预览版中测试这个（这有相同的问题），但我相当肯定它在IE9中是一样的。

示例代码：

.wrap {
    margin: 100px auto;
    width: 80%;
    border-radius: 50%;
    overflow: hidden;
}

.wrap .content {
    min-height: 400px;
    background: url('bg.jpg');
}