IE8を閲覧するときにウェブサイトが自動的にIE7互換モードを使用するようにする

序文

IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE8 ではファイル互換性が導入されました。 IE6 で導入された追加の互換モードであるファイル互換性により、IE が Web ページをレンダリングするときに特定のコンパイルモードを選択できます。
将来のバージョンでも Web ページの外観が一貫していることを保証するために、IE8 ではファイル互換性が導入されています。追加の互換モードを導入すると、
この記事では、ファイル互換性の必要性について説明し、現在のバージョンの IE で使用できるファイル互換性モードを一覧表示し、特定の互換性モードを選択する方法を示します。

ファイル互換性の必要性を理解する

IE の各メジャーバージョンには、ブラウザーの使いやすさの向上、セキュリティの強化、業界標準のサポートの向上を図るための新機能が追加されています。これらは IE の機能であるため、リスクの 1 つは、Web サイトの古いバージョンが正しく表示されない可能性があることです。

このリスクを最小限に抑えるために、IE6 では、Web 開発者が IE でページをコンパイルして表示する方法を選択できるようになりました。「Quirks モード」はデフォルトの設定で、古いブラウザの観点からページを表示します。「標準モード」(「厳密モード」とも呼ばれます) は、業界標準を最も完全にサポートします。ただし、この拡張サポートを活用するには、Web ページに適切な <!DOCTYPE> ディレクティブを含める必要があります。

Web ページに <!DOCTYPE> ディレクティブが含まれていない場合、IE6 はそれを Quirks モードで表示します。 Web ページに有効な <!DOCTYPE> ディレクティブが含まれていても、ブラウザーがそれを認識できない場合、IE6 はそれを IE6 標準モードで表示します。少数のサイトにはすでに <!DOCTYPE> ディレクティブが含まれていたため、互換モードへの切り替えは非常に成功しました。これにより、Web 開発者はページを標準モードに移行する最適なタイミングを選択できるようになります。

時間が経つにつれて、より多くのサイトが標準モードを使用するようになります。また、IE6 の機能を使用して IE を検出するようになりました。たとえば、IE6 はユニバーサルセレクタ (つまり、CSS のグローバルセレクタ * {}) をサポートしていないため、一部の Web サイトではこれを使用して IE に固有の応答を作成します。

IE7 でグローバルセレクターのサポートが追加されたとき、IE6 の機能に依存していたサイトはブラウザーの新しいバージョンを検出できませんでした。したがって、これらの IE 固有のマッピングは IE7 では機能せず、それらのサイトは期待どおりに表示されません。 <!DOCTYPE> は 2 つの互換モードのみをサポートしているため、影響を受ける Web サイトの所有者は、IE7 をサポートするようにサイトを更新する必要があります。

IE8 は以前のどのブラウザよりも業界標準をサポートしているため、古いブラウザ向けに設計されたページは期待どおりに表示されない可能性があります。これらすべての問題を軽減するために、IE8 ではファイル互換性の概念が導入され、Web ページのデザインと互換性のある IE の特定のバージョンを選択できるようになりました。ファイル互換性により、IE8 にいくつかの新しいモードが追加され、ブラウザに Web ページを解析およびコンパイルする方法が指示されます。 Web ページが IE8 で正しく表示されない場合は、Web サイトを更新して最新の Web 標準をサポートするか (推奨)、ページにメタ要素を追加して、IE8 にページを古いブラウザー用にコンパイルする方法を指示します。

これにより、IE8 の新機能をサポートするためにサイトをいつ更新するかを選択できるようになります。

ファイル互換モードを理解する

IE8 は、さまざまな特性を持ち、コンテンツの表示方法に影響を与える複数のファイル互換性モードをサポートしています。

•IE8 をエミュレートするモードでは、IE に <!DOCTYPE> ディレクティブを使用してコンテンツをコンパイルする方法を決定するように指示します。標準モードコマンドは IE8 標準モードとして表示され、Quirks モードコマンドは IE5 モードで表示されます。 IE8 モードとは異なり、Emulate IE8 モードは <!DOCTYPE> ディレクティブを尊重します。
•IE7 をエミュレートモードでは、IE に <!DOCTYPE> ディレクティブを使用してコンテンツのコンパイル方法を決定するように指示します。標準モードコマンドは IE7 標準モードとして表示され、Quirks モードコマンドは IE5 モードで表示されます。 IE7 モードとは異なり、Emulate IE7 モードは <!DOCTYPE> ディレクティブを尊重します。これは、多くの Web ページで最も推奨される互換モードです。
•IE5 モードは、IE5 の表示と非常によく似た IE7 の Quirks モードの表示のようにコンテンツをコンパイルします。
•IE7 モードでは、Web ページに <!DOCTYPE> ディレクティブが含まれているかどうかに関係なく、IE7 の標準モードで表示されているかのようにコンテンツをコンパイルします。
•IE8 モードは、W3C カスケードスタイルシートレベル 2.1 仕様や W3C セレクター API などの業界標準を最大限にサポートし、W3C カスケードスタイルシートレベル 3 仕様 (ワーキングドラフト) を限定的にサポートします。
•エッジモードは、IE に、現在利用可能な最高のモードでコンテンツを表示するように指示します。 IE8 を使用する場合は IE8 モードと同等になります。将来、より高い互換性モードをサポートする IE がリリースされた場合 (仮定)、Edge モードを使用するページには、そのバージョンでサポートされている最高のモードを使用してコンテンツが表示されます。 IE8 で表示した場合、同じページは正常に表示されます。

エッジモードでは、閲覧した Web ページのコンテンツを表示するために、このバージョンの IE でサポートされている最高のモードが使用されるため、テストページやその他の非商用ページでのみ使用することをお勧めします。

ファイル互換モードを指定する

ページのファイルモードを指定するには、meta 要素を使用してページに X-UA 互換の http-equiv ヘッダーを含めます。以下は、Emulate IE7 モードで互換性を指定する例です。

<html>
<ヘッド>

<meta http-equiv="X-UA-compatible" content="IE=EmulateIE7" />
<title>私のウェブページ</title>
</head>
<本文>
<p>ここにコンテンツを入力します。</p>
</本文>
</html>

指定されたページモードによって内容が変わります。IE7 をエミュレートするには、IE=EmulateIE7 を指定します。互換モードのいずれかを選択するには、IE=5、IE=7、または IE=8 を指定します。 IE=edge を指定して、IE8 がサポートする最高モードを使用するように指示することもできます。

X-UA 互換ヘッダーでは大文字と小文字は区別されません。ただし、タイトル要素とその他のメタ要素を除き、Web ページのヘッダーセクション内の他の要素の前に表示する必要があります。

デフォルトの互換モードを指定するようにWebサーバーを構成する

Web マスターは、Web サイトのカスタムヘッダーを定義することで、Web サイトに特定のファイル互換性モードを設定できます。具体的な方法は Web サーバーによって異なります。たとえば、次の web.config ファイルを使用すると、Microsoft インターネットインフォメーションサービス (IIS) でカスタムヘッダーを定義し、IE7 モードを使用してすべての Web ページを自動的にコンパイルできるようになります。

<?xml バージョン="1.0" エンコーディング="utf-8"?>
<構成>
<システム.Webサーバー>
<httpプロトコル>
<カスタムヘッダー>
<クリア />
<名前="X-UA-互換" 値="IE=EmulateIE7" を追加 />
</カスタムヘッダー>
</httpプロトコル>
</system.webServer>
</構成>

Web サーバーでデフォルトのファイル互換性モードを指定している場合は、個々のページで異なるファイル互換性モードを指定してそれを上書きできます。 Web ページで指定されたモードは、サーバーで指定されたモードよりも優先されます。

カスタムヘッダーの指定方法については、Web サーバーに問い合わせるか、次の詳細情報を参照してください。

Apache での META スイッチの実装
IIS での META スイッチの実装

ファイル互換モードを決定する

IE8 で表示する場合の Web ページのファイル互換性モードを確認するには、ドキュメントオブジェクトの documentMode 関数を使用します。たとえば、IE8 の URL バーに次のコードを入力すると、現在のページのドキュメントモードが表示されます。

javascript:alert(document.documentMode);
documentMode 関数は、現在のページのファイル互換性モードに対応する値を返します。たとえば、Web ページが IE8 モードをサポートするように指定されている場合、documentMode は値「8」を返します。

IE6 で導入された compatMode 機能は、IE8 で導入された documentMode 機能をサポートしていません。現在 compatMode を使用して構築されているアプリケーションは IE8 でも動作しますが、documentMode を使用するように更新する必要があります。

JavaScript を使用してドキュメントの互換モードを判別する場合は、古いバージョンの IE をサポートするために次のコードを含めます。

エンジン = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
// これは IE ブラウザです。エンジンはどのモードになっていますか?
if (document.documentMode) // IE8
エンジン = document.documentMode;
それ以外の場合 // IE 5-7
{
engine = 5; // 特に証明されない限り、Quirks モードを想定
(document.compatMode) の場合
{
document.compatMode == "CSS1Compat"の場合
engine = 7; // 標準モード
}
}
// エンジン変数にドキュメント互換性モードが含まれるようになりました。
}
コンテンツ属性値の理解

コンテンツ属性値は、以前に指定した値とは異なる値を受け取る柔軟性があります。これにより、IE でページを表示する方法をより細かく制御できるようになります。たとえば、コンテンツ属性値を IE=7.5 に設定できます。これを行うと、IE はこの値をバージョンベクターに変換し、最も近い結果を選択します。この場合、IE は IE7 モードに設定します。次の例では、このモードが他の値に設定されています。

<meta http-equiv="X-UA-compatible" content="IE=4"> 
<meta http-equiv="X-UA-compatible" content="IE=7.5"> 
<meta http-equiv="X-UA-compatible" content="IE=100"> 
<meta http-equiv="X-UA-compatible" content="IE=a"> 


<meta http-equiv="X-UA-compatible" content="IE=EmulateIE7">
注: 前の例では、個々のコンテンツ値を示しています。実際、IE は Web ページ内の最初の X-UA-compatible ヘッダーのみを実行します。

コンテンツ属性を使用して複数のファイル互換性モードを指定することもできます。これにより、将来のブラウザバージョンでもページが一貫して表示されるようになります。複数のドキュメントモードを設定するには、使用するモードを識別するコンテンツプロパティを設定します。パターンを区切るにはセミコロンを使用します。

特定のバージョンの IE が要求された互換性モードを複数サポートしている場合は、ヘッダーのコンテンツ属性にリストされている利用可能な最高のモードが使用されます。この機能を使用して特定の互換モードを除外することもできますが、推奨されません。たとえば、次のヘッダーは IE7 モードを除外します。

<meta http-equiv="X-UA-compatible" content="IE=5; IE=8" />
結論は

互換性は、Web デザイナーにとって非常に重要な懸念事項です。ウェブブラウザの機能や動作から完全に独立したウェブサイトを構築できれば理想的ですが、それが不可能な場合もあります。ファイル互換モードでは、Web ページを特定のバージョンの IE に制限できます。

X-UA-compatible ヘッダーを使用して、ページでサポートされる IE のバージョンを指定します。ページの互換性モードを決定するには、document.documentMode を使用します。

特定のバージョンの IE をサポートすることを選択すると、将来のブラウザバージョンでもページが一貫して表示されるようになります。

1. <meta http-equiv="X-UA-compatible" content="IE=5" />
これは、Windows Internet Explorer 7 の Quirks モードを使用するのと似ており、Windows Internet Explorer 5 がコンテンツを表示する方法と非常によく似ています。

2. <meta http-equiv="X-UA-compatible" content="IE=7" />
ページに <!DOCTYPE> ディレクティブが含まれているかどうかに関係なく、Windows Internet Explorer 7 標準モードが使用されているかのように動作します。

3. <meta http-equiv="X-UA-compatible" content="IE=8" />

4. <meta http-equiv="X-UA-compatible" content="edge" />
Edge モードは、Windows Internet Explorer に利用可能な最高のモードでコンテンツを表示するように指示し、実質的にロックモードを無効にします。

5. <meta http-equiv="X-UA-compatible" content="IE=EmulateIE7" />
EmulateIE7 モードは、Windows Internet Explorer に <!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するように指示します。標準モードディレクティブは Windows Internet Explorer 7 標準モードで表示され、Quirks モードディレクティブは IE5 モードに表示されます。 IE7 モードとは異なり、EmulateIE7 モードは <!DOCTYPE> ディレクティブを尊重します。ほとんどのサイトでは、これが推奨される互換モードです。

<<: ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します

>>: HTMLでは、全体的なスタイルとレイアウトを崩さずに、部分的に強制スクロールバーを使用できます。