☰

What does do? Ask Question

tag-icon • tag-icon html internet-explorer browser x-ua-compatible
What does do? Ask Question

What's the difference if one web page starts with

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

and If page starts with

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

If there is no difference, I suppose I can just ignore the X-UA-Compatible meta header, since I just want it to be rendered in most standard mode in all IE versions.

ベストアンサー1

November 2021 Update

As this answer is now 10+ years old my recommendation would be to leave this tag out altogether, unless you must support old legacy browsers.

October 2015 Update

This answer was posted several years ago and now the question really should be should you even consider using the X-UA-Compatible tag on your site? with the changes Microsoft has made to its browsers (more on those below).

Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether. If you use Twitter Bootstrap and need to eliminate validation warnings, this tag must appear in its specified order. Additional info below:

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. IE11 has made changes to these modes; see the IE11 note below. Microsoft Edge, the browser that replaced IE11, only honors the X-UA-Compatible meta tag in certain circumstances. See the Microsoft Edge note below.

According to Microsoft, when using the X-UA-Compatible tag, it should be as high as possible in your document head:

If you are using the X-UA-Compatible META tag you want to place it as close to the top of the page's HEAD as possible. Internet Explorer begins interpreting markup using the latest version. When Internet Explorer encounters the X-UA-Compatible META tag it starts over using the designated version's engine. This is a performance hit because the browser must stop and restart analyzing the content.

Here are your options:

  • "IE=edge"
  • "IE=11"
  • "IE=EmulateIE11"
  • "IE=10"
  • "IE=EmulateIE10"
  • "IE=9"
  • "IE=EmulateIE9
  • "IE=8"
  • "IE=EmulateIE8"
  • "IE=7"
  • "IE=EmulateIE7"
  • "IE=5"

To attempt to understand what each means, here are definitions provided by Microsoft:

Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

  • エッジ モードは、Internet Explorer に、利用可能な最高のモードでコンテンツを表示するように指示します。Internet Explorer 9 では、これは IE9 モードに相当します。Internet Explorer の将来のリリースで、より高い互換性モードがサポートされた場合、エッジ モードに設定されたページはそのバージョンでサポートされている最高のモードで表示されます。同じページは、Internet Explorer 9 で表示すると、引き続き IE9 モードで表示されます。Internet Explorer は、さまざまな機能を有効にし、コンテンツの表示方法に影響を与える可能性のある、多数のドキュメント互換性モードをサポートしています。
  • IE11 モードは、HTML5、CSS3 など、確立された業界標準と新興業界標準に対して最高のサポートを提供します。
  • IE10 モードは、HTML5、CSS3 など、確立された業界標準と新興業界標準に対して最高のサポートを提供します。
  • IE9 モードは、HTML5 (ワーキング ドラフト)、W3C カスケード スタイル シート レベル 3 仕様 (ワーキング ドラフト)、スケーラブル ベクター グラフィックス (SVG) 1.0 仕様など、確立された業界標準と新興業界標準を最大限にサポートします。[編集者注: IE 9 はCSS3 アニメーションをサポートしていません]。
  • IE8 モードは、W3C カスケード スタイル シート レベル 2.1 仕様や W3C セレクター API など、確立された多くの標準をサポートしています。また、W3C カスケード スタイル シート レベル 3 仕様 (ワーキング ドラフト) やその他の新しい標準も限定的にサポートしています。
  • IE7 モードでは、ページに <!DOCTYPE> ディレクティブが含まれているかどうかに関係なく、コンテンツは Internet Explorer 7 の標準モードで表示されるかのようにレンダリングされます。
  • エミュレート IE9 モードは、Internet Explorer に、<!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するように指示します。標準モード ディレクティブは IE9 モードに表示され、Quirks モード ディレクティブは IE5 モードに表示されます。IE9 モードとは異なり、エミュレート IE9 モードは <!DOCTYPE> ディレクティブを尊重します。
  • エミュレート IE8 モードは、Internet Explorer に、<!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するように指示します。標準モードのディレクティブは IE8 モードに表示され、Quirks モードのディレクティブは IE5 モードに表示されます。IE8 モードとは異なり、エミュレート IE8 モードは <!DOCTYPE> ディレクティブを尊重します。
  • IE7 のエミュレート モードでは、Internet Explorer に <!DOCTYPE> ディレクティブを使用してコンテンツのレンダリング方法を決定するように指示します。標準モードのディレクティブは Internet Explorer 7 の標準モードで表示され、互換モードのディレクティブは IE5 モードに表示されます。IE7 モードとは異なり、IE7 のエミュレート モードでは <!DOCTYPE> ディレクティブが尊重されます。多くの Web サイトでは、これが推奨される互換モードです。
  • IE5 モードでは、コンテンツが Internet Explorer 7 の Quirks モードで表示されているかのようにレンダリングされます。これは、Microsoft Internet Explorer 5 でコンテンツが表示される方法と非常に似ています。

IE10 注記: IE10 では、Quirks モードの動作はブラウザーの以前のバージョンとは異なります。IE9 およびそれ以前のバージョンでは、Quirks モードにより Web ページが IE5.5 でサポートされている機能に制限されていました。IE10 では、Quirks モードは HTML5 仕様で指定された相違点に準拠しています。

個人的には、古いバージョンには多くのバグがあり、IE が「互換モード」に移行してサイトを IE7 ではなく IE8 または 9 として表示することを望まないため、常にメタ タグを選択しますhttp-equiv="X-UA-Compatible" content="IE=edge"。常に最新バージョンの IE を好みます。

IE11

からマイクロソフト:

IE11 以降では、エッジ モードが推奨ドキュメント モードとなり、ブラウザーで利用できる最新の標準に対する最高のサポートを実現します。

エッジ モードを有効にするには、HTML5 ドキュメント タイプ宣言を使用します。

<!doctype html>

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

IE11 以降では、ドキュメント モードは非推奨となり、一時的な場合を除き、使用しなくなりました。従来の機能とドキュメント モードに依存しているサイトは、最新の標準を反映するように更新してください。

最新の標準と機能をサポートするためにサイトを再構築しながらサイトが機能するように特定のドキュメント モードをターゲットにする必要がある場合は、将来のバージョンでは利用できなくなる可能性のある移行機能を使用していることに注意してください。

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

マイクロソフトエッジ(Windows 10 にバンドルされている Internet Explorer の代替)

X-UA-CompatibleIE の「Edge」バージョンのメタタグに関する情報。マイクロソフトより:

「生きた」Edgeドキュメントモードのご紹介

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

パブリック インターネット サイトは、新しい Edge モード プラットフォーム (X-UA-compatible は無視) でレンダリングされます。当社の目標は、今後は Edge が「生きた」ドキュメント モードとなり、これ以上のドキュメント モードが導入されることはないということです。

Microsoft Edgeの変更により、ほとんどの場合でドキュメントモードがサポートされなくなったため、Microsoftは道具サイトをスキャンして、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 のレンダリング テクノロジーを使用して Google Chrome Frame 対応サイトを表示し、通常のブラウザの使用を妨げることなく、最新の HTML5 機能や Google Chrome のパフォーマンスおよびセキュリティ機能にアクセスできます。

Google Chrome Frame をインストールすると、何も考えなくても Web がより使いやすくなります。

ただし、そのプラグインを機能させるには、メタ タグchrome=1で使用する必要がありますX-UA-Compatible。

Chrome Frameの詳細情報については、ここ。

注: Google Chrome Frameは、IE6からIE9まで2014年2月25日に引退しました。詳細はここリンクを提供してくれた@mckに感謝します。

検証:

HTML5 :

ページは、W3 バリデーターを使用する場合のみ<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ヘッダーを設定してサーバーレベルでこれを行うことを検討してください。注意として、Microsoftは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).次のように述べています。オリバーの答えまたはbitinn の回答HTTP ヘッダーを設定する方法の詳細については、こちらをご覧ください。

テキスト

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />タグが適切に閉じられている限り (つまり/>と比較して) 、 を使用する場合の検証に問題はありません>。

Twitter Bootstrap (V3 以下)

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

詳細については、X-UA-CompatibleMicrosoftのドキュメントの互換性を定義するウェブサイト。

IEのサポート内容の詳細については、ホームページ。

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

おすすめ記事