ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

Internet ExplorerでX-UA-Compatibleを指定した場合の開発者ツールの表示

スポンサーリンク

以前Internet Explorerの互換表示設定でハマったことを書きました。
Internet Explorer 11でplaceholderが使えなかった原因 - ソフトウェア開発者の日常

headタグ内に

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>

と書けば、ドキュメントモードがEdgeになるのは把握しました。
今回は、

  • metaタグを指定せず、互換表示設定をしていない場合
  • metaタグを指定せず、互換表示設定をした場合
  • metaタグを指定し、互換表示設定をした場合

の3パターンで、ブラウザの表示および開発者ツールでの表示はどのようになるのか比較してみました。

Internet Explorer 10で確認

  • metaタグを指定せず、互換表示設定をしていない場合

f:id:AJYA:20140718053149p:plain
ブラウザーモード、ドキュメントモードともに、標準と呼べる状態になっています。
アドレス欄の互換表示設定のマークはOFFになっています。

  • metaタグを指定せず、互換表示設定をした場合

f:id:AJYA:20140718053158p:plain
ドキュメントモードが[IE7 標準]になります。
DOCTYPEがコメントアウトされ、無効になっています。
アドレス欄の互換表示設定のマークがONになっていることから、互換表示されていることがわかります。

  • metaタグを指定し、互換表示設定をした場合

f:id:AJYA:20140718053206p:plain
ドキュメントモードが[標準]に戻っています。
ブラウザーモードが[IE10 互換表示]になっているのは、仕方ないんでしょうね。
アドレス欄の互換表示設定のマークが表示されなくなります。

Internet Explorer 11で確認

  • metaタグを指定せず、互換表示設定をしていない場合

f:id:AJYA:20140718053213p:plain
ドキュメントモードは[Edge(規定)]になっています。

  • metaタグを指定せず、互換表示設定をした場合

f:id:AJYA:20140718053234p:plain
ドキュメントモードが[7(規定)]になり、[ローカルの互換表示設定から]とも表示されています。

  • metaタグを指定し、互換表示設定をした場合

f:id:AJYA:20140718053244p:plain
ドキュメントモードは[Edge(規定)]になり、[X-UA-Compatible META タグから]とも表示されています。


Internet Explorer 10Internet Explorer 11であれば状態の違いがわかるようになりました。
Internet Explorerで表示が崩れていると言われたときの確認する材料として使っていきたいです。