WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ブラウザーモードとドキュメントモード

by WebSurfer 29. December 2014 14:56

Internet Explorer (IE) で F12 キーを押して開発者ツールを起動すると、下の画像のようにブラウザーモードとドキュメントモードというメニューが表示されます。これについていろいろ調べましたので、後日役に立ちそうなことを忘れないように書いておきます。

ブラウザーモードの設定

ブラウザーモード

F12 開発者ツールのみで設定が可能なオプションで、IE 自体の動きが選択されたバージョンになります。

例えば、実際に使っているブラウザが IE9 でも、ブラウザーモードで他のバージョンを選択するとそのバージョンの動きになります。

試しに IE9 で[Internet Explorer 8(8)]を選択してみると、サーバーに送信される User Agent は Mozilla/4.0 (compatible; MSIE 8.0; ... というように IE8 のものになりました。(サーバーに送られる User Agent は、IE の互換表示の設定によっても変わってきます。詳しくは下の「2016/3/1 追記」を見てください)

また、<!--[if IE 8]> のような条件付コメントも、ブラウザーモードの選択によって影響を受けるとのことです(未検証です)。

ドキュメントモード

これはレンダリングエンジンのみを変更します。ブラウザーモードの切り替えのように IE 自体の動きは変更しません。

F12 開発者ツールを使う以外にも、(1) meta タグ (X-UA-Compatible) で指定、(2) IE の[ツール(T)]⇒[互換表示設定(B)]、(3) IE のアドレスバー右横の互換表示ボタン (IE11 では無くなった) で設定可能です。

ただし、IE9 で試した限りですが、上記の (2) と (3) では[Internet Explorer 7 標準(7)]相当になり、IE8 や Quirks モードを選ぶというようなことはできませんでした。

Quirks モードというのは IE6 で導入された旧バージョン(ということは IE5 以前のはず)のブラウザーと同じようにページが表示されるモードです。CSS の IE 独自実装である expression 関数が使えるのが Quirks モードです。

その他

IE10 以降では条件付コメントはサポートされなくなったそうです。

条件付きコメントがサポートされなくなった

IE10 以降では Quirks モードの既定の動作が修正されているそうです。

相互運用可能な (HTML5) Quirks モード

IE11 以降ではエッジモードが使われており、ドキュメントモードは廃止される可能性があるとのことで、将来的には切り替えることができなくなる可能性があるようです。ただし、現時点では F12 開発者ツールや meta タグ (X-UA-Compatible) での設定は可能な様子です。

IE11 の互換性の変更点

Web制作者は注意! Internet Explorer 11で変更された「互換性」

meta タグ (X-UA-Compatible) で指定する content="IE=7" とか content="IE=EmulateIE7" の違いは、以下のページが参考になると思います。

ドキュメント互換性の定義

Specifying legacy document modes

上の後者の記事によると、以下のように edge を指定した場合、IE6 ~ IE11 では "the highest standards mode supported by Internet Explorer" になるとのことです。

<meta http-equiv="x-ua-compatible" content="IE=edge" />

ただし、この先 meta タグで X-UA-Compatible は無視されるという話もあります。

"living" Edge ドキュメント モード

一体何を信じたら良いのかって感じですが、とにかく X-UA-Compatible でドキュメントモードを古いものに指定するようなことをしなければ今後も問題が起こることはなさそうです。

------- 2016/3/1 追記 -------

サーバーに送られる User Agent は、ブラウザモードの設定だけでなく、IE が互換表示するサイトと認識すると旧バージョンのものになるようです。

IE9 で試してみましたが、[ツール(T)]⇒[互換表示設定(B)]で表示されるダイアログで、要求するページのサイトが[互換表示に追加した Web サイト(W):]に含まれている場合とか、[すべての Web サイトを互換表示で表示する(E)]にチェックを入れた場合は IE7 の UA が Web サーバーに送られます。

[イントラネット サイトを互換表示で表示する(I)]にはデフォルトでチェックマークが入っているので要注意ですね。

Tags:

その他

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  July 2019  >>
MoTuWeThFrSaSu
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar