CSS3 PIE(PIE.htc)が上手く動作しない際の注意点

2010年11月17日

マイクロソフトのブラウザー Internet Explorer(6・7・8)に
一部の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(背景に最大4つの画像を使う)
  • 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用の2ファイルは使いません。
(ダウンロードするのに、サインアップする必要はありません。)


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

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


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

  position:relative;


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


  AddType text/x-component .htc


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


ラベル:



◎この投稿へのリンク:

リンクを作成

▲このページの先頭へ