ブログ内検索

by Futomi Hatano

IE8標準モードでVMLを使う方法

これまで IE8 標準モードでは VML が使えないと思われてきました。そのため、meta タグを使って IE7 標準モードにする方法などが使われてきましたが、やはり IE8 標準モードでも VML が使えるようにしたいものです。ところが、IE8 標準モードでも VML が使えるようにする方法がありました。

IE8 標準モードでは CSS の扱いが従来と異なります。これが原因で、IE8 標準モードで VML が有効にならなかったようです。これについては、IEBlog で情報が公開されています。

IEBlog – Site Compatibility and IE8

このページの「Generic CSS Prefix Selectors」欄に情報が掲載されていますが、簡単に言うと、IE8 標準モードでは CSS の prefix セレクターにワイルドカード(アスタリスク)が使えないため、個々の要素名を明示的に記述しなさいということです。

VMLを使う場合、スタイルシートで

v\:* { behavior: url(#default#VML); display:inline-block; }

と記述してきましたが、ここに使っている * が原因で IE8 標準モードで VML が有効にならないわけです。IE8 標準モードでも VML を有効にするためには、次のように書き換えます。

v\:line, v\:rect, v\:roundrect, v\:oval { behavior: url(#default#VML); display:inline-block; }

面倒なのですが、上記のように、利用する VML のタグすべてを明示的に指定します。もちろん、JavaScript からも制御可能です。

試しに、静的に VML タグを記述したサンプルと、JavaScript を使って動的に VML タグを追加するサンプルを作ってみました。いずれも、ブラウザーのレンダリングモードも表示するようにしてあります。これらのサンプルに IE8 でアクセスしてみてください。IE8 標準モードでも図が描けているのが分かります。ついでに JavaScript ファイルも公開します。ご参考になれば幸いです。

私が IE8 標準モードで VML が使えるようにする方法を調べたのは、ExplorerCanvas が IE8 標準モードで使える方法がないかを知りたかったからです。ただ、前述の方法だけでは ExplorerCanvas は IE8 標準モードでは動作しませんでした。VML タグの使い方や、スタイルシートの仕様の違いが原因だと思いますが、まだまだ解決まで道のりは長いようです。

この投稿は 2009年3月22日 日曜日 11:05 AM に ブラウザー カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。