マイクロソフトのブラウザー Internet Explorer（６・７・８）に
一部のCSS3のスタイルを機能させる
CSS3 PIE（PIE.htc）はとても便利なJavaScriptです。

CSS3 PIE（PIE.htc）によって現在、
IEに機能するようにできるCSS3のスタイルは次の通りです。
（「lojjic's PIE at master - GitHub」）

• border-radius（ボックスを角丸にする）
• box-shadow（ボックスに影をつける）
• border-image（境界線に画像を使用する）
• multiple background images（背景に最大４つの画像を使う）
• linear-gradient as background image（背景にグラデーション）

文章を読みやすく、伝わりやすくデザインするという点では、
充分ありがたいスタイルですね。

CSS3 PIE（PIE.htc）のダウンロード先

　　▶ Downloads for lojjic's PIE - GitHub

通常は、一番上の「PIE-1.0beta2.zip — PIE distribution, version 1.0 beta 2」をダウンロードし、「PIE.htc」を使います。php用の２ファイルは使いません。

（ダウンロードするのに、サインアップする必要はありません。）


ところが、CSS3 PIEのホームページに書いてあるように設定しても、
以下の事柄に注意しないと、上手くいかない場合があります。

注意点１
CSSにはCSSファイルから「PIE.htc」への相対パスではなく、
「PIE.htc」を使用しているHTMLファイルから「PIE.htc」への相対パスをCSSに書き込む必要があります。
（絶対パス＝フルパスを設定しても自分の場合、動作しませんでした。）


注意点２
各要素に以下の設定をしないと、CSS3 PIEが上手く動作しない場合や、同じセレクタ内の他の要素のエラー原因となる場合があります。

　　position:relative;


注意点３
サーバーの仕様によって動作しない場合があるので、
その場合は「.htaccess」ファイルにて以下の設定が必要になります。
（この設定でサーバーに、拡張子.htcのファイルがテキスト形式のファイルであることを伝え、サーバーで適切に使用できるようにする。）
（その他の「.htc」ファイルの際も有効。）

　　AddType text/x-component .htc


（なお、注意点につきましては、「CSS3PIE（PIE.htc）が効かないと思ったら」を参照させていただきました。感謝です！）

Tweet