IEでCSS3を使う方法「IE-CSS3.htc」

公開日

CSS3には、角丸やドロップシャドウを表現する機能があり便利なのです、残念ながらInternet Explorer6,7,8が非対応のため利用できなかったりします。

角丸など画像を1つ1つ作成するのが、あまり効率的でないので僕は、javascript「DD_roundies」で角丸を表示することが多いです。
ただIE8でCSSで背景画像を利用している箇所で1pxずれたり、IE9にどうも対応していないようで別の方法を少し調べてみました。

「IE-CSS3」が便利かつ簡単に利用できそうです。
以下、覚え書きです。

■手順1
まずHTCファイルをダウンロードします。
CSS3 support for Internet Explorer 6, 7, and 8ページの左上にある「Download」を選択して保存します。

■手順2
ダウンロードしたファイルを好きな場所に配置します。
なんとなくcssフォルダに配置しました。

■手順3
CSSの最後にbehaviorプロパティを使い読み込みます。

behavior: url(ie-css3.htc);

▼5pxの角丸ボックスを作成する場合のCSS記述例

[css]
.sample {

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(PIE.htc);
}
[/css]

.-moz-border-radiousはfirefox用の記述、-webkit-border-radiusはsafariとchrome用の記述です。また「IE-CSS3」でサポートしているプロパティは border-radius(角丸) box-shadow(ボックスシャドウ) text-shadow(テキストシャドウ) の3つになります。

正常に動作しない場合ですが、
behaviorのURLを相対パスで指定していると動作しないケースがあるそうです。絶対パスで指定しておきましょう。
サーバーによってはhtcファイルを認識しない場合があるそうです。

僕の場合は、IE8で角丸を指定した箇所の背景色が無効になる症状が発生しました。
調べてみると、どうやら後ろに隠れてしまっているようです。角丸のブロックのスタイルに下記を追加すると改善されました。
[css]position:relative;
z-index:1;[/css]

 

参考にさせていただいたサイト
hislab様
ダリの雑記:WEBプログラム版様


関連記事