border-radius.htcを使うとIE8で角丸ボックスが真っ黒になる

2012-09-13

すごくマイナーな話ですが、ちょっと困ったのでエントリーしておきます。

CSS3のborder-radiusは手軽に装飾ができて便利なのですが、IE8以下は対応していません。
そこで「border-radius.htc」というプラグインを使って対応するケースがあります。

これを使うとIE系でも角丸が再現可能なのですが、IE8だと背景が真っ黒になる場合があります。
HTML構造やCSSの状況によって発生したりしなかったりなので、細かい原因は追求してませんが、発生すると結構困ります。

という事で、シンプルな対応方法を書いておきます。

「CSSで背景(background-color)を指定する」

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(/css/border-radius.htc);
background-color: #fff;

実にシンプルですが、簡単に対応できます。
CSS3関連のプロパティは、適用されなくても問題無いデザインにしておく。
つまり諦める、というのがスマートですけどね。