internet-explorer-9 - IE9 在边框半径上没有子像素抗锯齿

Question

我已经申请border-radius了一个 div，结果在 IE9 中的渲染效果很差。我知道我可能要求太多了，但这仍然是根本不应该发生的事情。

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

这是我的 CSS：

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

Answer 1

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

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

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

示例代码：

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

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