IE6 でも角丸をつくる

HTML、CSSを書いていて、いつもIEに泣かされる。
今日は角丸を作れずにないた。

で、調べたら、PIE というものがあった。
IE6 でも角丸が作れるのだそうだ。

調べてみたら、Wordpress にも使われていた。
灯台もと暗しである。

以下のことを 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");
}

ここで、6行目が IE に対するプレフィックス。
7行目はPIE へのパス。
このパスは html からのパスを指定しないといけないので注意。

これで何とか、角丸も使えるようになったね。
よかったよかった。

開発してくださった方々、ありがとうございます。


This entry was posted in web, アプリケーション and tagged , , , . Bookmark the permalink.

コメントを残す

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