IE8のレンダリングモードと互換表示

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

互換表示ボタン

　IE8でウェブページを開くと、ほとんどのページでアドレスバーの右側に互換表示ボタンが表示されることがわかる。このボタンは、ページのレイアウトが崩れた場合にユーザーがレンダリングモードを切り替えるために用意されている。

　互換表示ボタンをオンにすると、METAタグで「IE=EmulateIE7」と指定したときと同じレンダリングモードになり、DOCTYPE宣言に応じてIE7 StandardsモードまたはQuirksモードでページが表示される。たとえば、XHTML1.0のDOCTYPE宣言を記述したページでは次のような表示になる。

DOCTYPE宣言によりIE8 Standardsモードで表示される。METAタグやHTTPレスポンスヘッダーによるレンダリングモードの指定はしていない。互換表示ボタンはオフの状態で表示される。（画像をクリックすると拡大します）

互換表示ボタンをオンにするとIE7 Standardsモードで表示される（画像をクリックすると拡大します）

…略…

※ブラウザで表示を確認する

　下位互換を保つために導入された苦肉の策だが、互換表示ボタンの設定はサイトごとに記憶されるため、ユーザーが誤ってオン／オフすると制作者が予期せぬ形でレイアウトが崩れ、そのままの状態で閲覧され続ける危険性もある。また、細かな機能を把握していないユーザーであれば、互換表示ボタンのアイコンを見て「ここは何か問題のあるページなのだろうか」と思うかもしれない。

　そこで、自分のページがどのレンダリングモードできちんと表示されるかを確認したら、互換表示ボタンを消すことをおすすめする。ボタンの表示は、METAタグかHTTPレスポンスヘッダでレンダリングモードを指定すれば消すことが可能だ。DOCTYPE宣言の記述だけでは消えないので注意したい。

METAタグでレンダリングモードをIE8 Standardsモードに指定したページ。互換表示ボタンが消えていることがわかる（画像をクリックすると拡大します）

…略…

※ブラウザで表示を確認する

　なお、レンダリングモードをQuirksモードにすると、METAタグやHTTPレスポンスヘッダの有無にかかわらず、互換表示ボタンは表示されたままとなる。IE8 Beta2ではQuirksモードで互換表示ボタンが表示されることはなかったのだが、RC1から表示されるようになったようだ。

　次回は、IE8で修正されたバグについてまとめていきたい。