1. ホーム
  2. html

[解決済み] <meta http-equiv="X-UA-Compatible" content="IE=edge">は何をするのですか?

2022-02-18 05:12:27

質問事項

で始まるWebページがある場合、その違いは何ですか?

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

で、ページが始まる場合は

<!DOCTYPE html> 
<html> 
  <head> 
     <!-- without X-UA-Compatible meta -->

違いがないのであれば、無視すればいいと思います。 X-UA-Compatible メタヘッダは、すべてのバージョンの IE で最も標準的なモードでレンダリングされるようにしたいだけだからです。

どのように解決するのですか?

2021年11月アップデート

この回答は10年以上前のものなので、古いレガシーブラウザをサポートする必要がある場合を除き、このタグを完全に削除することをお勧めします。

2015年10月更新

この回答は数年前に投稿されたもので、今となっては、この質問は本当にそうあるべきです。 を使用することを検討する必要があります。 X-UA-Compatible タグを使用することはできますか? マイクロソフトがブラウザに加えた変更に伴い(詳細は後述)。

サポートするマイクロソフトのブラウザによっては、このまま X-UA-Compatible タグを使用します。IE9やIE8をサポートする必要がある場合は、このタグを使用することをお勧めします。もし、最新のブラウザ(IE11やEdge)しかサポートしていないのであれば、このタグを完全に削除することを検討します。Twitter Bootstrapを使用していて、バリデーション警告を除去する必要がある場合は、このタグを指定した順序で表示しなければなりません。詳細は以下の通りです。


X-UA-Compatible メタタグを使用すると、ウェブ作成者はページをどのバージョンの Internet Explorer として表示するかを選択できます。IE11 では、これらのモードが変更されました。以下の IE11 に関する注記を参照してください。 マイクロソフトエッジ IE11の後継ブラウザであるSuperSuperSuperSuperでは X-UA-Compatible メタタグは、特定の状況下で使用されます。以下のMicrosoft Edgeの注意事項を参照してください。

マイクロソフトによると X-UA-Compatible タグは、ドキュメント内のできるだけ高い位置にあるべきです。 head :

<ブロッククオート

X-UA-CompatibleのMETAタグを使用する場合は、できるだけページのHEADの先頭に近いところに配置したいものです。Internet Explorerは、最新バージョンを使ってマークアップの解釈を開始します。Internet Explorerは、X-UA-Compatible METAタグを見つけると、指定されたバージョンのエンジンを使ってマークアップをやり直します。この場合、ブラウザはいったん停止してコンテンツの解析を再開しなければならないため、パフォーマンスが低下します。

以下はその選択肢です。

  • "IE=edge"。
  • "IE=11"。
  • "IE=EmulateIE11"。
  • "IE=10"。
  • "IE=EmulateIE10"。
  • "IE=9"。
  • IE=エミュレートIE9
  • "IE=8"。
  • "IE=EmulateIE8"。
  • "IE=7"。
  • "IE=EmulateIE7"。
  • "IE=5"。

それぞれの意味を理解するために、マイクロソフトが提供する定義を以下に示します。

<ブロッククオート

Internet Explorer は、さまざまな機能を有効にし、コンテンツの表示方法に影響を与えることができる、いくつかの文書互換モードをサポートしています。

<ブロッククオート
  • Edgeモードは、Internet Explorerに、利用可能な最も高いモードでコンテンツを表示するように指示します。Internet Explorer 9では、これはIE9モードと同等です。Internet Explorer の将来のリリースでより高い互換性モードがサポートされた場合、エッジモードに設定されたページは、そのバージョンでサポートされる最も高いモードで表示されます。同じページをInternet Explorer 9で表示すると、IE9モードで表示されます。 Internet Explorer は、さまざまな機能を有効にする数多くのドキュメント互換モードをサポートしており、コンテンツの表示方法に影響を与えることがあります。
<ブロッククオート
  • IE11モードは、HTML5、CSS3などの既存の業界標準や新しい業界標準を可能な限りサポートします。
<ブロッククオート
  • IE10モードは、HTML5、CSS3など、確立された業界標準と新たに登場した業界標準を可能な限りサポートします。
<ブロッククオート
  • IE9モードは、HTML5 (Working Draft)、W3C Cascading Style Sheets Level 3 Specification (Working Draft)、Scalable Vector Graphics (SVG) 1.0 Specificationなどの既存および新しい業界標準に最高のサポートを提供するものです。[編集部注:IE 9 はない はCSS3アニメーションに対応しています]。
<ブロッククオート
  • IE8モードは、W3C Cascading Style Sheets Level 2.1 Specification や W3C Selectors API など、確立された多くの標準をサポートしています。また、W3C Cascading Style Sheets Level 3 Specification (Working Draft) やその他の新しい標準にも限定的に対応しています。
<ブロッククオート
  • IE7モードは、ページに <!DOCTYPE> ディレクティブが含まれているかどうかにかかわらず、Internet Explorer 7 で標準モードで表示されているかのようにコンテンツをレンダリングします。
<ブロッククオート
  • Emulate IE9 モードでは、コンテンツのレンダリング方法を決定するために <!DOCTYPE> ディレクティブを使用するよう Internet Explorer に指示します。Standards モードのディレクティブは IE9 モードで表示され、quirks モードのディレクティブは IE5 モードで表示されます。IE9モードとは異なり、Emulate IE9モードは<!DOCTYPE>ディレクティブを尊重します。
<ブロッククオート
  • Emulate IE8 モードでは、Internet Explorer に <!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するよう指示します。Standards モードのディレクティブは IE8 モードで表示され、quirks モードのディレクティブは IE5 モードで表示されます。IE8モードとは異なり、Emulate IE8モードは<!DOCTYPE>ディレクティブを尊重します。
<ブロッククオート
  • Emulate IE7 モードでは、Internet Explorer に <!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するよう指示します。Standards モードのディレクティブは Internet Explorer 7 の standards モードで、quirks モードのディレクティブは IE5 モードで表示されます。IE7モードとは異なり、Emulate IE7モードは、<!DOCTYPE>ディレクティブを尊重します。多くのWebサイトでは、このモードが望ましい互換性モードです。
<ブロッククオート
  • IE5モードは、Microsoft Internet Explorer 5で表示されていたコンテンツと非常によく似たInternet Explorer 7によるクワークスモードで表示されているかのようにコンテンツをレンダリングします。

IE10の注意事項です。 IE10では、quirksモードの動作が以前のバージョンのブラウザと異なります。IE9およびそれ以前のバージョンでは、quirksモードは、ウェブページをIE5.5でサポートされる機能に制限していました。IE10では、quirksモードはHTML5仕様で規定された差異に準拠しています。

個人的には、いつも http-equiv="X-UA-Compatible" content="IE=edge" 古いバージョンにはたくさんのバグがあり、IE が互換モードになって、私のサイトが IE7 対 IE8 または 9 で表示されるのを避けたいからです。私は常に最新バージョンのIEを好みます。

IE11

から マイクロソフト :

IE11 からは、エッジモードが優先されるドキュメントモードとなり、ブラウザが利用可能な最新の標準を最もよくサポートしています。

<ブロッククオート

エッジモードを有効にするには、HTML5文書型宣言を使用します。

<!doctype html>

<ブロッククオート

エッジモードは、Internet Explorer 8で導入され、その後の各リリースで利用できるようになりました。エッジモードがサポートする機能は、コンテンツをレンダリングするブラウザの特定のバージョンでサポートされる機能に限定されることに注意してください。

<ブロッククオート

IE11から、ドキュメントモードは非推奨となり、一時的なものを除き、今後は使用しないようにしてください。レガシー機能やドキュメントモードに依存しているサイトは、必ず最新の標準に更新してください。

<ブロッククオート

最新の標準や機能をサポートするためにサイトを再構築する間、特定の文書モードをターゲットにする必要がある場合は、過渡的な機能を使用していること、および将来のバージョンで利用できない可能性があることに注意してください。

<ブロッククオート

現在、x-ua-compatible ヘッダーを使用してレガシードキュメントモードをターゲットにしている場合、あなたのサイトは IE11 で利用できる最高のエクスペリエンスを反映しない可能性があります。

マイクロソフトエッジ (Windows 10に同梱されるInternet Explorerの代替品です。)

に関する情報 X-UA-Compatible メタタグは、IEのEdge"バージョンに対応しています。 マイクロソフトより :

Edgeドキュメントモード "living "の紹介

<ブロッククオート

2013年8月に発表したとおり、IE11からドキュメントモードを廃止することになりました。最新のプラットフォームの更新により、レガシードキュメントモードの必要性は、主にエンタープライズレガシーウェブアプリケーションに限定されるようになりました。新しいアーキテクチャの変更により、これらのレガシードキュメントモードは、「生きている」Edgeモードの変更から分離されます。これにより、これらのモードに依存しているお客様に対してより高いレベルの互換性を保証し、Edgeの改善をより迅速に進めることができます。IEは、イントラネットのサイト、互換表示リストのサイト、およびEnterpriseモードで使用される場合にのみ、ドキュメントモードをサポートします。

<ブロッククオート

公共のインターネットサイトは、新しい Edge モードプラットフォームでレンダリングされます(X-UA-Compatible は無視されます)。今後はEdgeが生きたドキュメントモードとなり、これ以上のドキュメントモードが導入されないことが私たちの目標です。

Microsoft Edgeでほとんどのケースでドキュメントモードをサポートしないように変更したことで、マイクロソフトは ツール Edgeと互換性のないコードがあるかどうかをチェックするために、サイトをスキャンします。

Chrome=1 IE用情報

また、以下のようなものもあります。 chrome=1 のように、上記のオプションのいずれかと併用することができます。 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> . chrome=1 はGoogleのChrome Frame用で、次のように定義されています。

Google Chrome Frameは、オープンソースのブラウザプラグインです。このプラグインをインストールしたユーザーは、ブラウザでページを開く際に、Google Chromeのオープンウェブテクノロジーと高速なJavaScriptエンジンを利用することができます。

<ブロッククオート

Google Chrome Frameは、Internet Explorerでのブラウジング体験をシームレスに拡張します。Google Chrome Frameに対応したサイトをGoogle Chromeのレンダリング技術で表示し、最新のHTML5機能やGoogle Chromeのパフォーマンスおよびセキュリティ機能を、通常のブラウザの使用を妨げることなく利用することができます。

<ブロッククオート

Google Chrome Frameをインストールすると、何も考えなくてもウェブが良くなる。

しかし、そのプラグインを動作させるためには chrome=1 の中に X-UA-Compatible メタタグを使用します。

Chrome Frameの詳細については、こちらをご覧ください。 こちら .

Google Chromeのフレームは、以下の場合にのみ機能します。 IE6からIE9まで , 2014年2月25日に退役しました。詳細はこちら こちら . リンクしてくれた@mckさんに感謝します。

バリデーションです。

HTML5 :

このページのバリデーションは W3 Validator を使用した場合のみ <meta http-equiv="X-UA-Compatible" content="IE=Edge"> . それ以外の値の場合は、エラーを投げます。 A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge. つまり、もしあなたが IE=edge,chrome=1 はバリデーションされません。最近のブラウザはこの行を無視するだけなので、私はこのエラーを完全に無視します。

もし、完全に有効なコードが必要な場合は、HTTPヘッダを設定することによって、サーバーレベルでこれを行うことを検討してください。ちなみに、マイクロソフトはこう言っています。 If both of these instructions are sent (meta and HTTP), the developer's preference (meta element) takes precedence over the web server setting (HTTP header). 参照 olibreの回答 または ビチンさんの回答 は、HTTPヘッダーの設定方法について詳しく説明しています。

XHTML

を使用する場合、バリデーションに問題はありません。 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> タグが適切に閉じられている限り (すなわち />> ).

Twitter Bootstrap (V3以下)

このタグは、少なくとも2014年からBootstrapチームによって強く推奨されており ブートリント を投げ続けています。 警告 を省略した場合。Linterでは警告とエラーを区別しているため、このタグを省略した場合の重大性は軽微であると考えられます。


の詳細については、こちらをご覧ください。 X-UA-Compatible マイクロソフトの ドキュメント互換性を定義するウェブサイト .

IEの対応状況について詳しくは カニースドットコム .

Twitter Bootstrapの要件の詳細については、bootlintプロジェクトを参照してください。 wikiページ .