Information

IEでもCSS3で角丸ができるPIE.htcの使い方と注意点

  •    2011年1月12日(水) 01:57 JST 閲覧件数 9,953
覚えたてのCSS3で見出しタグを角丸にしてみたのですが、普段使ってるのはChrome。ふとIE8で見てみると角丸になってない！あ～、、、、IEめんどくさい！



◇PIEの設置
ちょっとググルとPIE.htcを使うと良いらしいので試してみました。

PIEのダウンロード先

ダウンロードしたのは PIE-1.0beta3.zip 。
解凍すると下記5ファイルが出てきます。WebサーバにPIE-1.0betaディレクトリを作成して全部コピーします。設置はこれで終わり。

PIE.htc
PIE.js
PIE.php
PIE_uncompressed.htc
PIE_uncompressed.js


◇設定
設定作業としてやることはcssファイルに一行書き足すだけです。(厳密に言うとセレクタごとに書き足す。)

下記コードは実際に使っているh2という見出しタグのCSSコードの抜粋です。青字は元のコード(chromeでは角丸の動作OK)、赤字はPIEのために書き足した部分です。
border-radius系の行が3つあるのは、chrome用だったりFirefox用だったりCSS3標準草案だったりです。(このへんの書き方がまばらなのもめんどくさい^^;)

h2{
    ・・・・・・
    border-radius: 5px;  
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px; 
    position:relative;            /* 要らなかったがPIEを動作させるために追加 */
    behavior: url( http://localhost/PIE-1.0beta3/PIE.htc ) ;       /* CSS3 PIE */
}
 

注意点をまとめると・・・

(1) position:relative; を追加する。

(2) url は http://からのフルURLパスで書く。



◇参考ブログ
http://webdesignrecipes.com/css3-compatabilty-resources-and-references-for-internet-explorer/
http://internet.designcross.jp/2010/11/css3-piepiehtc.html