IE の互換機能ドキュメントモード・ブラウザモードの違い

IE 対応をしていると、互換モードボタン・開発者ツール・metaタグ(<meta http-equiv="X-UA-Compatible" content="IE=edge" />)で互換表示切り替えをすると思いますが、ドキュメントモード・ブラウザモードの違いや、何が何と結びついているのか、こんがらがりがち。

IE11で変更もあったので、誰かのために覚え書きしときます。

※関連記事: IE である環境(ドメイン)でだけ勝手に互換表示になる

IE 8〜10

• ドキュメントモード
  • レンダリングエンジンを変更。UserAgent には影響しない。
  • 変更方法
    • 開発者ツール(F12)
    • metaタグ(X-UA-Compatible)
    • ツール>互換表示設定
    • 互換表示ボタン(アドレスバー横)
• ブラウザモード
  • UserAgent・バージョン ベクター・ドキュメント モード(CSS、DOMとかの扱い)を変更。
  • 変更方法
    • 開発者ツール

IE 11

• ドキュメントモード
  • レンダリングエンジンを変更。UserAgent には影響しない。
  • 変更方法
    • 開発者ツール(F12)
    • metaタグ(X-UA-Compatible)
    • ツール>互換表示設定
    • (IE11で互換表示ボタンは無くなりました！)
• ユーザエージェント文字列(旧ブラウザモード)
  • UserAgent を変更。レンダリングエンジンには影響しない。
  • 変更方法
    • 開発者ツール

公式ドキュメントリンク

• IE8
  • http://msdn.microsoft.com/ja-jp/library/cc848894(v=vs.85).aspx#doccompat
• IE9
  • http://msdn.microsoft.com/ja-jp/library/gg589500(v=vs.85).aspx#BrowserModeMenu
• IE10
  • http://msdn.microsoft.com/ja-jp/library/hh673527(v=vs.85).aspx
• IE11
  • http://msdn.microsoft.com/ja-jp/library/dn255001(v=vs.85).aspx