「CSS3 PIE」がうまく動かなかった時の対処法

Publish:

Category:CSS

Tag:

  • Hatena Bookmark:
  • Twitter:

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){}" />

Comment [3]

動作しなかったところが一瞬で解決されましたー!ありがとうございます!

Mana

>Manaさん
コメントありがとうございます。
Manaさんのサイトには随分前からお世話になっているので、お役に立てて嬉しい限りです!

indigo

ありがとうございます!おかげでたすかりました。

まんま

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top