[解決済み] <meta http-equiv="X-UA-Compatible" content="IE=edge">は何をするのですか?
質問事項
で始まる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ページ .
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] (X)HTMLにおける "PRE "タグの用途は何ですか?
-
[解決済み] フッターの内容が重なっているのを修正するには?
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] HTTPのContent-Dispositionヘッダーのファイル名パラメータをエンコードする方法は?
-
[解決済み】enctype='multipart/form-data'とはどういう意味ですか?
-
[解決済み】"X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSSのホバー効果が私のコードで機能しない
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?
-
[解決済み] タグを使用してIE互換モードを強制的にオフにする
-
[解決済み】Twitter Bootstrap 3でのIE8の問題
-
[解決済み】"X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"