れぶろぐ

2007-10-14 (日)

■ VML を利用して IE で border-radius が使えるようにする

元ネタはこれ。

IEでもborder-radiusっぽいことをするbehavior

IE の機能不足を、IE の独自機能で補う、というアプローチが実に素敵だが、残念なことに後方互換モードでしか使えないという制限がある。でもきっとなにか方法があるはずだと思ったので、いろいろ調べつつ、標準準拠モードや IE7 でも問題なく使えるように手を加えてみた。

標準準拠モードで使えない

これは Microsoft のサポート技術情報に対処法が載っていた。

VML element is not displayed in strict standards-compliant mode in Internet Explorer

つまり、<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 の指定を書く方がいいのかも。

Tags: CSS JavaScript |

| Permalink

[コメントを書く]

コメントがあればどうぞ! E-mailアドレスは公開されません。

本日のリンク元

編集


		2007年 10月
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

2007-10-14 (日)

■ VML を利用して IE で border-radius が使えるようにする

標準準拠モードで使えない

IE7 で -moz-border-radius の指定が無視される

<html> タグに xmlns:v="urn:schemas-microsoft-com:vml" の指定が必要

カレンダー

過去の日記

ブログ内検索

タグクラウド

最近の記事