[IE]IE6〜IE8でも一部のCSS3プロパティが使えるPIE.htcの使い方と動かない時の対処法

IE下位バージョンでもCSS3のborder-radiusやbox-shadow、linear-gradientなどを利用できる便利なPIE.htc。

今回はこのPIE.htcファイルの基本的な設置方法から、動かない時の対処法まで簡単にまとめて紹介いたします。

PIE.htc で利用できるプロパティ

PIE.htcを使うことで、以下の有名どころのCSS3プロパティがIE下位バージョンでも利用できるようになります。

※IE-CSS3.htcとの大きな違いは、text-shadowが利用できない分、グラデーション（linear-gradient）を利用できる、という感じでしょうか。
※その他の利用可能なプロパティは、以下の参考ページも合わせてご覧下さい。
Supported CSS3 Features – CSS3 PIE: CSS3 decorations for IE

PIE.htc ファイルのダウンロード

以下のページよりPIE.htcファイルをダウンロードします。
https://github.com/lojjic/PIE/downloads

CSS 内への PIE.htc の設置例

以下のコードは「角丸のborder-radius」と組み合わせた例ですが、IEのビヘイビア機能を利用してHTCファイルをHTML上で使用できるようにします。

behaviorにはPIE.htcファイルへのパスを記述します。

PIE.htc が動かない場合の対処法

上記例のような記述だけでは動かないことがよくあります( ´,_ゝ｀) ので、その場合は以下の3つのポイントに注意してソースを見直すなどしてみましょう。

（１）PIE.htc を絶対パスにする

behaviorで指定するPIE.htcファイルへのパスを「絶対パス」にする方法です。

（２）PIE.htc を適用する要素に position:relativeを適用

PIE.htc ファイルを使う要素内でposition:relativeを指定します。

position:relativeを置く事でレイアウトが崩れる問題がなければ概ねこの方法で解決します。

（３）htaccess ファイルの編集

サーバによっては「.htc の拡張子を認識しないがためにPIE.htcが動かない」場合があるようですので、.htaccessファイルに以下のコードを記述してサーバにアップし、

.htc の拡張子をテキスト形式であることを示してあげます。

PIE.htc を使ったサンプル

PIE.htcを利用したIE8 以下向けのサンプルは、
border-radius、box-shadow、linear-gradientに絞ってこちらの記事に掲載していますので、合わせて参考にしてみてください。