internet-explorer-9 - IE9ボーダー半径でのサブピクセルアンチエイリアシングなし

Question

divに適用border-radiusしましたが、IE9でのレンダリングが非常に悪くなりました。私はおそらくあまりにも多くを求めていることを知っていますが、それでもこれはまったく起こらないはずのことです。

サブピクセルアンチエイリアシングとは何かをクライアントに説明することは非常に困難です。

これは私のCSSです：

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

Answer 1

私は問題が何であるかを知っていると信じています。角が丸い要素で背景画像を使用しているようです。IEはそれが好きではありません。それが実際に問題の原因である場合は、2番目の要素を追加することで問題を解決できます。

親要素は、丸みを帯びたエッジとオーバーフローを非表示にする必要があります。子要素は背景画像を取得します。

私はこれをWindows8リリースプレビューのIE10でしかテストできませんでした（これは同じ問題があります）が、IE9でも同じであるとかなり確信しています。

コード例：

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

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