2007-10-14 (日)
■ VML を利用して IE で border-radius が使えるようにする
元ネタはこれ。
IE の機能不足を、IE の独自機能で補う、というアプローチが実に素敵だが、 残念なことに後方互換モードでしか使えないという制限がある。 でもきっとなにか方法があるはずだと思ったので、いろいろ調べつつ、 標準準拠モードや IE7 でも問題なく使えるように手を加えてみた。
標準準拠モードで使えない
これは Microsoft のサポート技術情報に対処法が載っていた。
つまり、<v:roundrect> タグに style="display: inline-block;" を追加で設定すれば良いらしい。 なお、<v:fill> タグの方にも style="display: inline-block;" を追加すると妙な余白ができてしまうので、 よく分からないが、こちらはそのままにしておけば良いようだ。
IE7 で -moz-border-radius の指定が無視される
IE7 で見るとボーダーの半径がおかしい。 調べてみると -moz-border-radius の値を取得する部分でおかしなことになっていた。
- alert(this.currentStyle['moz-border-radius']); とした場合、
IE6 以下: 20px IE7: undefined
- alert(this.currentStyle['-moz-border-radius']); とした場合、
IE6 以下: undefined IE7: 20px
なんなんだ、これは。 裏付けとなる資料が見つけられなかったが、 behavior で currentStyle を使う場合、IE6 以下と IE7 では使い方が違うようだ。 ということで、
--- border-radius.htc.orig
+++ border-radius.htc
@@ -5,4 +5,5 @@
this.className = this.className.concat(' ', classID);
var arcSize = Math.min(parseInt(this.currentStyle['moz-border-radius'] ||
+ this.currentStyle['-moz-border-radius'] ||
this.currentStyle['border-radius']) /
Math.min(this.offsetWidth, this.offsetHeight), 1);
のように修正して対処。
<html> タグに xmlns:v="urn:schemas-microsoft-com:vml" の指定が必要
VML 用の namespace が自動で設定されるように、以下のようなコードを追加してみた。
if (!document.namespaces.v) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
}
ただし検索してみると、 このコードがウィルスだと誤検出される場合があるらしいので、 素直に <html> タグに namespace の指定を書く方がいいのかも。
[コメントを書く]
本日のリンク元
- 1269 http://hamasyou.com/blog/archives/000363
- 226 http://www.yomotsu.net/wp/?p=441
- 19 http://press.eek.jp/result/ie7/ie7 ie6
- 13 google検索(border-radius ie)
- 12 google検索(ie border-radius)
- 8 google検索(border-radius ie)
- 7 google検索(IE8 border-radius)
- 7 google検索(IE8 border-radius)
- 7 google検索(t)
- 7 google検索(ie border-radius)
- 7 google検索(document.namespaces)
- 7 google検索(border-radius.htc)
- 6 http://www.yomotsu.net/wp/index.php
- 6 http://www.revulo.com/
- 6 google検索(border-radius ie)
- 6 google検索(ie border-radius)
- 6 http://www.google.co.th/search?hl=th&q=border-radi...
- 5 google検索(vml javascript)
- 5 google検索(border-radius ie)
- 5 google検索(標準準拠モード vml)
- 5 google検索(border-radius.htc)
- 5 google検索(border-radius IE)
- 5 google検索(border-radius)
- 5 google検索(VML サンプル)
- 5 google検索(border-radius ie)
- 5 google検索(border-radius IE)
- 5 google検索(border-radius ie)
- 5 google検索(f)
- 4 http://www.yomotsu.net/wp/index.php?p=441&more=1
- 4 http://www.yomotsu.net/wp/?paged=27
- 4 google検索(border-radius IE)
- 4 http://www.google.co.jp/url?sa=t&source=web&cd=6&v...
- 4 google検索(border-radius IE)
- 4 google検索(t)
- 4 google検索(ie border-radius)
- 4 google検索(document.namespaces)
- 4 google検索(IE7 radius)
- 4 google検索(IE border-radius)
- 4 google検索(moz-border-radius IE)
- 4 google検索(border-radius.htc)
- 4 google検索(document.namespaces)
- 4 google検索(v:fill)
- 4 google検索(border-radius ie)
- 4 google検索(border-radius IE)
- 4 http://www.google.ae/search?hl=ja&rlz=1T4GGLD_jaJP...
- 3 google検索(border-radius.htc ie7)
- 3 google検索(IE VML)
- 3 google検索(document.namespaces)
- 3 google検索(ie border radius)
- 3 google検索(border-radius ie6)
- 3 google検索(border-radius IE 8)
- 3 http://www.google.co.jp/url?sa=t&rct=j&q=vml ie6&s...
- 3 google検索(IE7 CSS radius)
- 3 google検索(border-radius.htc 標準モード)
- 3 google検索(border radius ie)
- 3 google検索(IEでもborder-radiusっぽいことをするbehavior)
- 3 google検索(IE VML 後方互換モード)
- 3 google検索(8)
- 3 google検索(vml javascript)
- 3 google検索(javascript vml)
- 3 google検索(ie vml)
- 3 google検索(document.namespaces.add vml)
- 3 google検索(borderradius vml)
- 3 google検索(border-radius.htc)
- 3 google検索(border-radius ie6)
- 3 google検索(border-radius IE)
- 3 google検索(border-radius)
- 3 google検索(IE border-radius)
- 3 google検索(IE border-radius)
- 3 google検索(ie border-radius)
- 3 google検索(border-radius ie)
- 3 google検索(border-radius ie)
- 3 google検索(IE border-radius)
- 3 google検索(ie7 border-radius)
- 3 google検索(IE border-radius)
- 3 google検索(border radius htc)
- 3 google検索(border-radius ie)
- 3 google検索(ie border-radius)
- 3 google検索(v:roundrect ie6 css)
- 3 google検索(border radius ie)
- 3 google検索(vml 拡張子)
- 3 google検索(moz-border-radius ie)
- 3 google検索(moz-border-radius ie)
- 3 google検索(javascript namespace 設定 vml)
- 3 google検索(javascript document namespaces)
- 3 google検索(ie7 border-radius )
- 3 google検索(ie6 border-radius)
- 3 google検索(border-radius.htc 標準準拠)
- 3 google検索(border-radius.htc)
- 3 google検索(border-radius ie8)
- 3 google検索(border-radius ie)
- 3 google検索(border-radius ie)
- 3 google検索(border-radius IE)
- 3 google検索(VML JavaScript)
- 3 google検索(document.namespaces.v)
- 3 google検索(border css IE)
- 3 google検索(border-radius ie)
- 3 google検索(border-radius)
- 3 google検索(border-radius ie7)
- 3 http://www.bing.com/search?q=border-radius IE&filt...
