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

エ・ビスコム・テック・ラボ
2009-04-06 11:20:01
  • このエントリーをはてなブックマークに追加

互換表示ボタン

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

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

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




SAMPLE

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

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

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

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




SAMPLE


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

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

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

  • コメント(3件)
#1 anonymous   2009-04-06 23:51:24
Internet Explorer の [互換表示設定] で [マイクロソフトからの更新された Web サイト一覧を含める]にチェックを入れたときのレンダリングモードの指定が抜けているのではないでしょうか。

ホームページ公開サービスあたりだとサービス主のWebサイトの関係でホームページ公開サービスのドメインも互換表示に設定される事例ががありました。
(少なくとも、@nifty @homepageはnifty.comが互換表示設定に設定されているため、
DOCTYPE宣言でIE8 Standardsモードにしただけでは、IE 7 Standardsモードになっていました。
METAタグを入れることでIE8 Standardsモードで表示されるようになりました。)
#2 anonymous   2009-04-07 04:29:47
これを滑稽と言わずして何を滑稽と言う。ie9ではさらにレンダリングモードが増えるのだろうか。
#3 anonymous   2009-05-20 20:10:28
ほんとだ。サーバ側で

とすると将来 ie9 が出てもそのページはie8モードなのか。。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]