IE6/IE7/IE8でCSS3を使う方法「PIE.htc」

公開日

IE6など古いバージョンのInternet ExplorerにCSS3を適用させる方法で、以前「IE-CSS3」をご紹介したのですが、「PIE.htc」の方が対応しているプロパティも多く、また動作が安定していて良さそうな印象を持ちました。

角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどが利用可能になります。

以下、覚え書きです。

■手順1
まずHTCファイルをダウンロードします。
PIE download

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

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

behavior: url(PIE.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用の記述です。また「PIE.htc」でサポートしているプロパティは下記になります。

・border-radius
・box-shadow
・border-image
・multiple background images
・linear-gradient as background image

参考にさせていただいたサイト
コリス様


関連記事