TOP  >  CSS・スタイルシートTIPS  >  CSS3PIE(PIE.htc)が効かないと思ったら

2010年08月20日 16:42

CSS3PIE(PIE.htc)が効かないと思ったら

IEをCSS3対応にしたい場合に使われる、
CSS3 PIE_ CSS3 decorations for IEなどの,
javascript(.htcファイル)を使った方法ですが、
使う場合に注意する点があります。



たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

上記のようなリファレンスや、本家サイトには、
behavior: url(○○○.htc);
とCSSに書けば良いとだけありますが、
まずパスがCSSから.PIE.htcのファイルへの相対パスになっていた場合反応しません。

CSSにはCSSからPIE.htcへの相対パスではなく、
PIE.htcを使用しているファイルからPIE.htcへの相対パスをCSSに書き込む必要があります。
例 /jsディレクトリに置く場合 behavior: url(/js/PIE.htc);

また、背景色やボーダーが消えてしまうので、
各要素に

position:relative;

が必要になります。

さらに、サーバーの仕様によって動作しない場合があるので、
その場合は.htaccessにて以下の設定が必要になります。

AddType text/x-component .htc

2011.06.23追記
CSS3 PIE(pie.htc)使用時にIE8以前で正しく印刷ができない現象があるので、
印刷も考慮に入れる必要がある場合は要注意です。

すぐに使えるスタイルシート標準テクニック
iPhoneアプリケーション開発ガイド
HTML5&CSS3辞典

TOP  >  CSS・スタイルシートTIPS  >  CSS3PIE(PIE.htc)が効かないと思ったら




正当なCSSです!