HTML、CSSを書いていて、いつもIEに泣かされる。
今日は角丸を作れずにないた。
で、調べたら、PIE というものがあった。
IE6 でも角丸が作れるのだそうだ。
調べてみたら、Wordpress にも使われていた。
灯台もと暗しである。
PIE でできること
以下のことを IE6 から IE8 にも動作させることが出来るらしい。
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
ダウンロードと設定
上のサイトからダウンロードすると書庫の中に以下のファイルがある。
- PIE.htc
- PIE.js
- PIE.php
- PIE_uncompressed.htc
- PIE_uncompressed.js
実際に使ったのは「PIE.htc」だけである。
以下のように CSS に記述した。
.test{
width:300px;
height:300px;
border:solid 1px #000;
border-radius:10px;
-ms-border-radius: 10px;
behavior: url("css/PIE.htc");
}
ここで、６行目が IE に対するプレフィックス。
７行目はPIE へのパス。
このパスは html からのパスを指定しないといけないので注意。
これで何とか、角丸も使えるようになったね。
よかったよかった。
開発してくださった方々、ありがとうございます。
コメント