「CSS3 PIE」がうまく動かなかった時の対処法
「CSS3 PIE」を導入してみたものの、うまく動かなかった時の対処法まとめ。
検証にはCSS3 PIEの最新バージョン(1.0beta5)を使用しています。
※DEPTHCODEさんよりoverflow-y:scrollでのエラー情報を教えていただきまして2011年10月27日に加筆しています。
- 不具合対処一覧
CSS3 PIEが効いていない場合
1. PIE.htcファイルのパス記述を確認する
CSSに記述した場所にPIE.htcファイルががあるかどうか再確認。
通常のCSSとは違い、JavaScriptファイルを指定するとき同様にHTMLからのファイル相対パスで指定するか、サイト相対パスで記述する。
2. htaccessにMIMEタイプを追加する
サーバーによってはデフォルトでは.htcファイル認識しない場合があるので、htaccessに以下の記述を追加する。
AddType text/x-component .htc
背景が表示されない場合
CSS3 PIEを適応させたセレクタにposition: relative;を追加する。
.hogehoge {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
position: relative;
behavior: url(/PIE.htc);
}
overflow-y: scrollのブロック要素からはみ出る場合
(Internet Explorer 8以下)
トップページのニュース等でボックス要素の高さを固定して疑似インラインフレーム的に表示させることがある。その中の要素にCSS3 PIEを適用しているとIE6~8ではボックスから要素がはみ出してしまう。(IE9でははみ出さない)
言葉で説明するとわかりにくいので、以下キャプチャ。別ページで確認できる。

その場合は「overflow-y: scroll」を指定している要素にposition: relative;を追加する。
.hogehoge {
overflow-y: scroll;
position: relative;
}
疑似インラインフレームの中の要素にボックス要素があり、更にその中の要素にCSS3 PIEを適用していると疑似インラインフレームの中には収まるものの、スクロール時におかしな振る舞い(IE8のみ)をする。
その時はCSS3 PIEを使用している要素の親ボックス要素等にposition: relative;を追加すると解消される。
読み込み時、スクリプトエラーがでる場合
(CSS3 PIE 1.0beta4以下)
inputタグ(text、submitどちらも)にpxではないem等を使用している場合、「CSS3 PIE 1.0beta4」以下を組み込んだページをIE8以下で閲覧すると下記エラーがでる。
※最新バージョンの「CSS3 PIE 1.0beta5」ではIE6~8でもエラーはでません。
- Web ページ エラーの詳細
- メッセージ: 予期しないメソッドの呼び出し、またはプロパティ アクセスです。
ライン: 19
文字: 199
コード: 0
URI: http://******/PIE.htc
CSS3 PIE 1.0beta4以下を使っている場合は、おとなしくCSS3 PIE 1.0beta5に変更するか、em等の相対値をpxに変更しよう。
プリント時、スクリプトエラーがでる場合
(CSS3 PIE 1.0beta3以下)
最新バージョンの1.0beta4では問題ないけれど、1.0beta3以下だとIEのブラウザからプリントを選択した時にスクリプトエラーが検出されてしまう。
最新のバージョンのCSS3 PIEに差し替えるか、何らかの理由で差し替えが行えない場合はPIE.htcの8行目~10行目を以下に書き換える。
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="try{init()}catch(e){}" />
<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="try{init()}catch(e){}" />
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="try{cleanup()}catch(e){}" />
動作しなかったところが一瞬で解決されましたー!ありがとうございます!
Mana
/
>Manaさん
コメントありがとうございます。
Manaさんのサイトには随分前からお世話になっているので、お役に立てて嬉しい限りです!
indigo
/