スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

PIE.htcが使えない時の対処法。

IE6/7/8でもCSS3に対応させてくれるCSS3 PIE(PIE.htc)

角丸をcssで記述したくて探してたら見つけました。
他にもIE-CSS3(ie-css3.htc)とかcurved-corner(border-radius.htc) とかあって試してみましたが、PIE.htcが一番綺麗に角丸が表示されました。(他のはアンチエイリアスがかかりすぎてるというか、関係ない直線部分までぼやけてるんですよね…)

…が、しかし。
クライアントのテストサーバーにアップするとまったく効かない(>_<)
あれこれ(PIE.htcファイルへのパスを絶対や相対に修正したり、position: relative;を足したり…)試しましたが全てダメで。
サーバーのせいかとも考えたのですが、先にアップしていたiepngfix.htcはうまく動作してたので、それはないかと。
結局悩みに悩んで、でも角丸が一番綺麗に表示されるPIE.htcをなんとか使いたい!と、CSS3 PIEをダウンロードした際同梱されてたPIE.jsに変えようと諦めかけたその時、PIE.phpが目についてファイルを開いてみた。

記述は短いけどすべて英語なので、私のつたない英語力では理解しきれてないのですが
php環境でPIE.htcファイルを認識させるためのファイルと理解し、ダメ元で設置してみた。

  1. cssファイルに記述していた.htcファイルの拡張子をすべて.phpに変更。
    behavior: url(PIE.htc); → behavior: url(PIE.php);

  2. PIE.htcと同列にPIE.phpを追加設置。


これだけ!!!!
効きました!!!!!!

その他の注意点は他のサイトでも紹介されているものもありますが、
css記述の際のPIEへのリンクは、表示されるhtmlファイルからの相対パスで。
position: relative;は、角丸処理したいボックスの下に背景画像がある場合、IEでは角丸処理したボックスが背景画像の下に隠れてしまうので、それを防ぐためには必要。
スポンサーサイト

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

IE7、IE8でborder-radiusが使えるPIE.htcが便利すぎる!!!

以前はjQuery Cornerを使っていましたが、なんかややこしいですよね。他のブラウザと同じようにスタイルシートで設定できたらいいのに・・・と思っていたところ、PIE.htcというものを発 ...

コメントの投稿

非公開コメント

Profile

chiemi09

Author:chiemi09

JavaスクリプトもActionスクリプトも苦手なWebデザイナー。
せめてjQueryのカスタマイズができればと仕事の合間にお勉強中です。

Recent Entries
Archives
Theme
Search
RSS
Bookmarks
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。