【保存版】IE互換モードの完全攻略！オフにする方法から注意点まで

2024-04-16

HTMLタグを使ってIE互換モードを強制的にオフにする方法

このような場合、HTMLタグを使ってIE互換モードを強制的にオフにすることができます。方法は以下の通りです。

<meta>タグを使う

<head>セクション内に以下の<meta>タグを追加します。

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

このタグは、IEに最新のレンダリングエンジンであるEdgeを使用するように指示します。

DOCTYPE宣言を使う

HTMLドキュメントの先頭に以下のDOCTYPE宣言を追加します。

<!DOCTYPE html>

この宣言は、IEに最新のHTML標準モードを使用するように指示します。

注意事項

上記の方法は、IE 8以降でのみ有効です。
すべての古いWebサイトで確実に動作するとは限りません。
可能であれば、古いWebサイトを新しい技術で作り直すことを検討してください。

上記以外にも、JavaScriptやサーバー側の設定を使ってIE互換モードをオフにする方法があります。しかし、これらの方法はより複雑で、すべての状況で使えるわけではありません。

一般的には、上記のHTMLタグを使った方法で十分です。

補足

IE互換モードは、Webサイトの互換性を向上させるために使用されますが、パフォーマンスやセキュリティを低下させる可能性があります。
可能であれば、IE互換モードではなく、最新のレンダリングエンジンを使用することをお勧めします。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>IE互換モードをオフにする</title>
</head>
<body>
  <h1>IE互換モードをオフにしました</h1>
</body>
</html>

このコードを実行すると、IEで開いたときに、IE互換モードではなく、最新のレンダリングエンジンでページが表示されます。

説明

<meta http-equiv="X-UA-Compatible" content="IE=Edge">タグは、IEに最新のレンダリングエンジンであるEdgeを使用するように指示します。

IE互換モードをオフにするその他の方法

レジストリエディタを使う

レジストリエディタを使って、IEの互換モード設定を変更することができます。この方法は上級者向けであり、誤った操作を行うとシステムに問題が発生する可能性があるため、十分な知識と注意が必要です。

レジストリエディタを使う場合は、以下の手順に従ってください。

以下のキーに移動します。

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl

FEATURE_COMPATIBILITY_MODEという名前のDWORD値を作成します。
コンピュータを再起動します。

グループポリシーを使う

グループポリシーを使って、IEの互換モード設定を変更することができます。この方法は、企業や組織向けであり、個人で使用することはできません。

ユーザーの構成 > 管理用テンプレート > コントロールパネル > インターネットオプション > インターネットオプションの表示

互換表示を使用しないというポリシーをダブルクリックします。
有効を選択します。
OKをクリックします。

JavaScriptを使う

JavaScriptを使って、IEの互換モード設定を変更することができます。この方法は、Web開発者向けであり、ある程度の知識が必要です。

JavaScriptを使う場合は、以下のコード例を参考にしてください。

<script>
  if (navigator.userAgent.indexOf('MSIE') != -1) {
    document.addEventListener('DOMContentLoaded', function() {
      var meta = document.createElement('meta');
      meta.httpEquiv = 'X-UA-Compatible';
      meta.content = 'IE=Edge';
      document.getElementsByTagName('head')[0].appendChild(meta);
    });
  }
</script>