Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた

　次期Windows OS「Vista」に標準搭載される「Internet Explorer 7（IE7）」（日本語版）のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。

　まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている（笑）。マクロソフトの看板アプリケーションに抜かりがあるはずはない。

　ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE7ベータ2では正しく表示されなかった。

▲ IE7ベータ2で「はてなダイアリー日記」を見ると表示が崩れる

　この記事が公開されるころにはすでに対応が済んでいるかもしれないが、このスタイル崩壊の理由は何なのだろうか。ベータ2ではまだまだバグがつぶしきれていないということか。はてなダイアリーのテーマのスタイル記述（CSS）に、IE7ベータ2と相性の悪い指定があるのか。

　IE7ベータ2だと表示が崩れるサイトがあるのだが、これはいったいどういうわけか？

　IE7の開発を伝えるブログIEBlog : Standards and CSS in IEの記事（英文）を読むと主要なCSSのバグは消されつつあるようなのだが。

　そこで先の「はてなダイアリー日記」のCSSを解析してみたのだが、特にCSSの指定に間違いはなさそうだ。が、しばらくソースを見ていて、もしかすると思い、DOCTYPE宣言にシステム識別子を書き加えてみた。するとかなりいい感じになった。

▲ DOCTYPE宣言を書き換えると表示は崩れなくなる（でも少し変）

　これはどういうことなのか。理由は少し難しい。

　とりあえずの問題はDOCTYPE宣言にある。DOCTYPE宣言とはWebページの規格を示す指定のことで、公開識別子とシステム識別子という部分からできている。そして、IE6の場合、はDOCTYPE宣言のシステム識別子が省略されているとQuirksモードと呼ばれる表示方法で、そのHTML文書を表示する仕様になっているのだ。

　Quirksモードとは、IE5.5（およびそれ以前）互換の古い表示方法で、Firefoxなどがサポートしている、CSSの規格を遵守したStandardモードとはCSSの解釈が異なっている。古い規格に合わせたモードにすると、表示が崩れるという現象が起こるわけだ。

　ユーザーがどんなブラウザーを使っているかは、Webサイトを制作する側には分からない。このため、古いブラウザー（Quirksモード）で閲覧しても、新しいブラウザー（Standardモード）で閲覧しても“同じように見えるWebデザイン”がWebデザイナーに課せられた命題だった。そして、Webデザイナーたちは、そのための裏技を次々と考え出していった。

　実は、「はてなダイアリー日記」がIE7ベータ2で正しく表示されなかったのは、この裏技に原因があった。このサイトのDOCTYPE宣言にはシステム識別子がなく、IEはQuirksモードで表示されていたのだが、FirefoxなどのStandardモードと同じように表示させるために、IE専用の裏技が使われていたのだ。

　少し専門的な話になるが、例えば、Webページを表示するときに使用される「width:auto」という指定が、IEではうまく表示できないことがある。そのため、代わりに「_width:100%」というIE専用の指定をするのがプロフェッショナルなWebデザイナーの裏技だった。アンダースコアの付いた指定はIEでしか読み込まれないからだ。

　「はてなダイアリー日記」のDOCTYPE宣言にシステム識別子を書き加えたことで表示が改善されたのは、それによって文書を扱うモードが切り替わったということ。つまり、IE7ベータ2もIE6と同じように、システム識別子が省略されているとQuirksモードになると考えていいだろう。ところが、IE7ベータ2は、IE専用の指定を無視してしまう。これが、IE用に裏技指定をしたWebデザインで表示が崩れてしまった原因だ。

　ここまで見てくると、この問題は、もしかするとIE7ベータ2のバグではないのかもしれないという懸念が沸いてくる。IE7ベータ2の表示は、HTMLの規格外の指定を否定しているのにすぎないからだ。

　解決策はある。すべてのWebページのデザインを、システム識別子を省略しないでStandardモードに対応させればいい。IE7ベータ2もシステム識別子があればStandardモードが選択される。IE6までは問題があった「width:auto」もきれいに表示される。

　ただしそうなると、「はてなダイアリー日記」のように現在のIE6のQuirksモードを前提としたWebページのデザインは根本から書き直す必要が出てくる。 　このままのIE7の正式版がリリースされると、Web業界は混乱が予想されるだろう。