CSS3の角丸をIE8(IE6 & IE7)でも実現させる[border-radius.htc]の落とし穴

border-radios.htcはいまいち使えないことが分かったのでメモです。

Borderのコーナーを角丸にする方法

CSS3では[border-radius]という記述があるので簡単に実現できます。
forefoxやwebkit系(safari,chrome)でも対応させるためには、以下の通り。

[code]
moz-border-radius: 5px; //for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px; //CSS3
[/code]

ただし、これではIE8以前には対応してません。
IE8以前のIE6,7,8に対応させるためには、「border-radius.htc」というものがありました。
これはIEのCSS拡張で、CSS内でjavascriptが呼び出せる仕組みになります。

注意:htcという拡張子をブロックするようなwebサーバ設定もありますので、その場合は使えません

以下、参考サイトです。けっこう記事にされている方いますね。

[CSS3による角丸表現の決定版?の htcファイル「border-radius.htc」]

[border-radius.htc使ってみた – 放置演算子]

[IE で border-radius を使う方法 – それはBlog]

上記の方は、3種類比較されていました。

  • border-radius.htc を使う
    VML を利用して、behavior を使って border-radius を実現する方法
  • border-radius.js を使う
    JavaScript を使って border-radius を実現する方法
  • JQuery Corner を使う
    jQuery Corner という jQuery プラグインを使って border-radius を実現する方法

border-radius.js」というJSもあるようですが、IE8は未対応とのことです。

さらに、「jQuery Cornerを使う」とありましたので実装テストしてみました。

[jQuery Corner plugin]

これを使えばできそうかと思いましたが、FORM要素のINPUTタグには使えませんでした。

border-radius.htcを使ってみる

border-radius.htcのダウンロード先はこちら
[curved-corner – CSS curved corner – Google Project Hosting]
http://code.google.com/p/curved-corner/

記述方法はこちら

[code]
moz-border-radius: 5px; //for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px; //CSS3
behavior: url(border-radius.htc);//for IE
[/code]

border-radius.htcの動きとしては、
moz-border-radius、-webkit-border-radius、border-radiusで指定されている値を取得してるようです。

FORM要素のINPUTタグでも使える!と喜んでみたものの残念な結果に。
こちらのブラウザ(IE8)で確認したところ、合計で30個まではOKで31個以上のborder-radius.htc呼び出しがあった時にエラーとなっています。それも意味不明なJavascriptエラーです。
「エラー:引数が無効です」

デザイン的に細かいところまで角丸を実現させようとするborder-radius.htcではかなり厳しいですね。
一番単純な方法としては、Borderを無くして、背景に角が丸い画像を置くのが一番良いかもしれませんね。

コメントを残す

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