IEのドキュメントモードとは
InternetExploreのドキュメントモードとは、Webページのソースコード、DTD宣言などに応じてHTMLおよびCSSの出力方法、つまりレンダリング/表示方法が変わる仕組みのことです。
これはIEのバージョンによって、レンダリングする機能(レンダリング・エンジン)が大きく異なるためだ。背景にはリリースされる時期ごとに、Web標準への準拠があり、レンダリング・エンジンのバージョンによっては、意図したとおりにWebページが表示されない。
<a href="http://px.a8.net/svt/ejp?a8mat=2NG8KR+AY52C2+348+U2LRL" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www24.a8.net/svt/bgt?aid=160321131662&wid=005&eno=01&mid=s00000000404005051000&mc=1"></a><img border="0" width="1" height="1" src="http://www19.a8.net/0.gif?a8mat=2NG8KR+AY52C2+348+U2LRL" alt=""><a href="http://px.a8.net/svt/ejp?a8mat=25RF6O+6ZUGR6+348+IHQ1T" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www21.a8.net/svt/bgt?aid=130609824423&wid=005&eno=01&mid=s00000000404003106000&mc=1"></a><img border="0" width="1" height="1" src="http://www10.a8.net/0.gif?a8mat=25RF6O+6ZUGR6+348+IHQ1T" alt="">
それを回避するために、バージョンごとの表示機能をIEは実装しています。
ドキュメントモードは、ページ制作者側でも指定できますし、UA側でも変更することが可能です。
IE10においてのドキュメントモード以下の通り 。
IEのバージョンによりレンダリングがことなるので、レイアウトが崩れたりすることがあるので、正しいレンダリング・モードで表示指定する必要がある。
ドキュメントモードの選択によりレイアウトが崩れたり、表示が意図しない場合は、制作側で表示指定の記述が必要だ。
■ドキュメントモードの説明
ドキュメントモードには大きく分けるとIEx標準と、Quirks(クワークス)モードがある。
○Quirksモードとは?
いわゆる古いドキュメントエンジン用の表示設定で、DOCTYPEの宣言がない場合やHTML2.0/3.0など、HTML4以前のHTMLコードで制作された場合に選択される。
例えばIE10では以下がヘッダにあると、標準モード(IE10ドキュメントモード)がページの既定となり表示され、DTD宣 言をなくすと、Quirksモードが既定のモードとなり表示される。
では標準モード、記述をなくせばQuirksモードがページ既定のモードとなり表示。
IE5 QuirksモードとQuirks(ページの既定)は異なります。
Quirks モードは、標準モードと同一APIの動作セットで、HTML5と関連するW3C仕様で定義されている、限られた例外機能が使用可能になっています。
.機能などがあった場合、ドキュメントモードをmetaタグに記述して自動選択して表示させることが可能だ。■ドキュメントモードの指定にはmetaタグ内でモードを指定方法
headタグ内のtitleタグの上に下記を追加して互換モードを指定可能だ。
を指定することが可能だ。互換モードというのは、次世代のバージョンに対応しない形式で作成されたWebページなどを、以前のバージョンのレンダリングエンジンで表示させることができるモード。
■ドキュメントモードのブラウザからの確認方法
<a href="http://px.a8.net/svt/ejp?a8mat=2NG8KR+AY52C2+348+U2LRL" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www24.a8.net/svt/bgt?aid=160321131662&wid=005&eno=01&mid=s00000000404005051000&mc=1"></a><img border="0" width="1" height="1" src="http://www19.a8.net/0.gif?a8mat=2NG8KR+AY52C2+348+U2LRL" alt=""><a href="http://px.a8.net/svt/ejp?a8mat=25RF6O+6ZUGR6+348+IHQ1T" target="_blank"><img border="0" width="468" height="60" alt="" src="http://www21.a8.net/svt/bgt?aid=130609824423&wid=005&eno=01&mid=s00000000404003106000&mc=1"></a><img border="0" width="1" height="1" src="http://www10.a8.net/0.gif?a8mat=25RF6O+6ZUGR6+348+IHQ1T" alt="">
[F12]キーを押すか、メインメニューの[ツール]-[開発者モード]で、ウィンドウ下部に開発者ツールウィンドウが表示される。
メニュー部分のブラウザモードの右に、ドキュメントコードがあり、選択されているド キュメントモードが表示されている。この項目を選択するとプルダウンメニューが表示されるので、指定を変更するときは、メニューからモード指定することができる。
■表示されているIEのレンダリング・モードの確認用JavaScript
Webページ表示の時に選択されているレンダリングモードを表示させるJavaScriptによる記述。