1つのWebページが以下のように始まっている場合、その違いは何でしょうか?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
で始まるページと
<!DOCTYPE html>
<html>
<head>
<!-- without X-UA-Compatible meta -->
違いがなければ、すべてのIEバージョンで最も標準的なモードでレンダリングされるようにしたいだけなので、X-UA-Compatible
メタヘッダを無視してもいいと思います。
2015年10月更新。
X-UA-Compatible
tag on your site?
サポートしているMicrosoftブラウザによっては、X-UA-Compatible
タグを使い続ける必要がないかもしれません。IE9やIE8をサポートする必要がある場合は、このタグを使用することをお勧めします。最新のブラウザ(IE11やEdge)のみをサポートしている場合は、このタグを完全に削除することを検討します。Twitter Bootstrapを使用していて、バリデーションの警告を排除する必要がある場合は、このタグを指定された順序で表示する必要があります。詳細は以下をご覧ください。X-UA-Compatibleメタタグは、ウェブ制作者がページをレンダリングする際の Internet Explorer のバージョンを選択できるようにします。IE11では、これらのモードに変更が加えられています。以下のIE11のノートを参照してください。[IE11の後継ブラウザであるMicrosoft Edgeは、特定の状況下でのみ
X-UA-Compatibleメタタグを尊重します。以下のMicrosoft Edgeの説明を参照してください。 Microsoftによると、
X-UA-Compatibleタグを使用する場合は、ドキュメントの
head`内のできるだけ高い位置に記述する必要があります。
X-UA-Compatible METAタグを使用する場合は、ページ'のHEADのできるだけ上の方に配置してください。Internet Explorerは、最新のバージョンを使ってマークアップの解釈を開始します。Internet Explorerは、X-UA-Compatible METAタグに遭遇すると、指定されたバージョンのエンジンを使って再起動します。これは、ブラウザが一旦停止してコンテンツの分析を再開しなければならないため、パフォーマンスが低下します。
以下のようなオプションがあります。
- 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などを含む、確立された、または新しい業界標準を最大限にサポートします。[編集部注:IE9は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モードは、Internet Explorerに<!DOCTYPE>ディレクティブを使用してコンテンツのレンダリング方法を決定するように指示します。StandardsモードのディレクティブはIE9モードで表示され、QuirksモードのディレクティブはIE5モードで表示されます。IE9モードとは異なり、Emulate IE9モードでは、<!DOCTYPE>ディレクティブを尊重します。
- Emulate IE8モードは、Internet Explorerに<!DOCTYPE>ディレクティブを使用してコンテンツのレンダリング方法を決定するように指示します。StandardsモードのディレクティブはIE8モードで表示され、QuirksモードのディレクティブはIE5モードで表示されます。IE8モードとは異なり、エミュレートIE8モードでは、<!DOCTYPE>ディレクティブを尊重します。
- Emulate IE7モードでは、Internet Explorerに<!DOCTYPE>ディレクティブを使用してコンテンツのレンダリング方法を決定します。StandardsモードのディレクティブはInternet Explorer7の標準モードで、QuirksモードのディレクティブはIE5のモードで表示されます。IE7モードとは異なり、エミュレートIE7モードは、<!DOCTYPE>ディレクティブを尊重します。多くのWebサイトでは、このモードが好ましい互換モードです。
IE5モードは、Microsoft Internet Explorer 5でコンテンツがquirksモードで表示されていたかのように、コンテンツをレンダリングします。 IE10 NOTE: IE10では、quirksモードの動作が以前のバージョンのブラウザとは異なります。IE9およびそれ以前のバージョンでは、quirksモードは、ウェブページをIE5.5でサポートされている機能に限定していました。IE10では、quirksモードは、HTML5の仕様で指定されている違いに準拠しています。 個人的には、常に
http-equiv="X-UA-Compatible" content="IE=edge"
のmetaタグを選択しています。古いバージョンには多くのバグがあり、IEが勝手に"Compatibility mode"に移行して、私のサイトがIE7とIE8や9の間で表示されるのを避けたいからです。私は常に最新バージョンのIEを使用しています。 IE11 マイクロソフト]2より。 IE11では、エッジモードがドキュメントモードとして推奨されています。エッジモードは、ブラウザで利用可能な最新の標準を最大限にサポートしています。 エッジモードを有効にするには、HTML5の文書型宣言を使用してください。<!doctype html>
エッジモードは、Internet Explorer 8で導入され、その後の各リリースで利用可能になりました。なお、エッジモードでサポートされる機能は、コンテンツをレンダリングするブラウザの特定のバージョンでサポートされるものに限られます。 IE11以降、ドキュメントモードは非推奨となっており、一時的な場合を除き、今後は使用しないでください。レガシーな機能やドキュメントモードに依存しているサイトは、必ず最新の規格に合わせて更新してください。 ドキュメントモードを利用することで、サイトの機能を維持しつつ、最新の規格や機能に対応させる必要がある場合は、将来のバージョンでは利用できなくなる可能性のある過渡的な機能を利用していることを認識してください。 現在、x-ua-compatibleヘッダーを使用してレガシードキュメントモードをターゲットにしている場合、IE11で得られる最高のエクスペリエンスをサイトに反映できない可能性があります。 Microsoft Edge (Windows 10に同梱されているInternet Explorerの代替) X-UA-Compatiblemeta tag for the "Edge" version of IEに関する情報です。[マイクロソフトより][4]: 生きている」Edgeのドキュメントモードを紹介します。 2013年8月に発表したとおり、IE11でドキュメントモードを廃止します。最新のプラットフォームのアップデートにより、レガシードキュメントモードの必要性は、主にエンタープライズ向けのレガシーWebアプリケーションに限られるようになりました。新しいアーキテクチャの変更により、これらのレガシードキュメントモードは、「生きている」Edgeモードの変更から分離されます。これにより、これらのモードに依存しているお客様には、より高いレベルの互換性が保証され、また、Edgeの改善をより迅速に進めることができます。IEは、イントラネットサイト、互換表示リストに掲載されているサイト、およびエンタープライズモードで使用されている場合のみ、ドキュメントモードを尊重します。 パブリックインターネットサイトは、新しいEdgeモードのプラットフォームでレンダリングされます(X-UA-Compatibleは無視されます)。今後、Edgeをドキュメントモードとして使用し、これ以上のドキュメントモードを導入しないことを目標としています。 Microsoft Edgeがほとんどのケースでドキュメントモードをサポートしなくなったことを受けて、Microsoftは、お客様のサイトをスキャンして、Edgeと互換性のないコードがあるかどうかを確認するための[ツール][5]を用意しています。 ***Chrome=1 Info for 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がインストールされていると、何も考えなくてもウェブが快適になります。 ただし、このプラグインを動作させるには、X-UA-Compatible
メタタグでchrome=1
を使用する必要があります。 Chrome Frameに関する詳しい情報はこちらをご覧ください。 Note: Google Chrome FrameはIE6~IE9でのみ動作し、2014年2月25日に引退しました。詳細はこちらをご覧ください。リンクを貼ってくださった@mckさんに感謝します。 バリデーション: HTML5を使用しています。 このページは、<meta http-equiv="X-UA-Compatible" content="IE=Edge">
を使用している場合に限り、W3 Validatorで検証されます。それ以外の値の場合は、次のようなエラーが発生します:A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with value IE=edge.
つまり、IE=edge,chrome=1
とした場合には、検証されません。最近のブラウザは単にこのコードの行を無視するので、このエラーは完全に無視します。 完全に正しいコードでなければならない場合は、サーバーレベルでHTTPヘッダーを設定することを検討してください。なお、マイクロソフトでは、「これらの指示(metaとHTTP)が両方送られてきた場合は、開発者の好み(meta要素)がWebサーバの設定(HTTPヘッダ)よりも優先される」としています。 XHTMLについて meta http-equiv="X-UA-Compatible" content="IE=Edge" />を使用しても、タグが適切に閉じられていれば(例:
/>vs
>`)、検証に問題はありません。 Twitterのブートストラップ。 このタグは、少なくとも2014年以降、Bootstrapチームによって強く推奨されていますが、twbsチームがオーサリングしたリンターであるBootlintは、このタグが省略されると警告を投げ続けています。リンターは警告とエラーを区別しているため、このタグを省略した場合の重大性は軽微なものと考えられます。X-UA-Compatible」の詳細については、Microsoft'のWebsite Defining Document Compatibilityを参照してください。 IEがサポートしているものについては、caniuse.comを参照してください。 Twitter Bootstrapの要件については、bootlintプロジェクトwikiページを参照してください。
コンテンツ=`"IE=edge,chrome=1"
** 他の X-UA-Compatible
モードをスキップします。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
--------------------------
javascript::JSON.parse()
を有効にするには、このmetaタグが必要です <!DOCTYPE html>
があっても)**あなたのHTMLで
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge
は、IE が最新(エッジ)バージョンのレンダリングエンジンを使用することを意味します。chrome=1
は、IEがインストールされている場合、Chromeレンダリングエンジンを使用することを意味します。
Webサーバーの設定で、より良い方法があります: add_header X-UA-Compatible "IE=Edge,chrome=1";
}
しかし、マイクロソフトの立場は明確ではありませんでした。別の[MSDNページではEdgeモードを推奨していませんでした][noEdge]。
Edgeモードでは、すべてのページを標準モードで開くことが強制されるからです。
Internet Explorerのバージョンに関係なく、すべてのページが標準モードで開かれます。
Internet Explorerのバージョンに関わらず、すべてのページを標準モードで開くことになるため、Internet Explorerで閲覧するすべてのページにこのモードを使用したくなるかもしれません。
X-UA-Compatibleヘッダーは、Windows Internet Explorer>からしかサポートされていませんので、絶対にやめてください。 X-UA-Compatible
ヘッダーは、Windows Internet Explorer 8からしかサポートされていません。
X-UA-Compatible`ヘッダは、Windows Internet Explorer 8からしかサポートされていません。
サポートされているすべてのバージョンのInternet Explorerで、標準モードでページを開きたい場合は
標準モードでページを開きたい場合は、HTML5 文書型宣言を使用してください [...]。
Ricardo](https://stackoverflow.com/users/321555)が説明しているように(以下のコメントで)、HTML5'のDOCTYPEだけでなく、どんなDOCTYPE(HTML4、XHTML1...)でも標準モードのトリガーとして使用できます。大事なのは、ページ内に必ずDOCTYPEがあることです。
Clara Onagerは、Specifying legacy document modesの古いバージョンでも気にしていました。
エッジモードはテスト目的のみです。 本番環境では使用しないでください。 Usman Y](https://stackoverflow.com/users/1728403)が[Clara Onager](https://stackoverflow.com/users/1400368)が話しているのかと思ったくらい紛らわしいです。 [...]の例は、説明のためにのみ提供されています。 本番環境では使わないでください。
<meta http-equiv="X-UA-Compatible" content="IE=7,9,10" > **さて...この回答の残りの部分では、なぜ`content="IE=edge,chrome=1"`を使用することが生産現場での良い習慣であるかをより詳しく説明します。 --------------------------------- 歴史 ------- 長年(2000年から2008年まで)、[IEの市場シェアは80%以上][IEMS]でした。そして、IE **v6** は事実上の標準と考えられていました([2003年][OneStat]では80%から97%の市場シェア、[2004年、2005年、2006年][IE6]ではIE6のみの市場シェア、すべてのIEバージョンではより多くの市場シェア)。 IE6は[Web標準](http://en.wikipedia.org/wiki/Web_standards)を尊重していなかったので、開発者はIE6を使ってウェブサイトをテストしなければなりませんでした。この状況はMicrosoft(MS)にとって素晴らしいもので、Web開発者はMSの製品を**購入**しなければならず(例えば、Windowsを購入しなければIEは使えない)、非準拠でいる方が利益になる(つまり、Microsoftは他社を排除して**標準になりたかった)のです。 そのため、多くのサイトがIE6にしか対応しておらず、IEがWeb標準に準拠していないため、これらのWebサイトは標準準拠のブラウザではうまく表示されませんでした。さらに悪いことに、[多くのサイトがIEのみを必要としていた](http://hintsforums.macworld.com/showthread.php?t=111479)。 しかし、この時、Mozillaは、可能な限りすべてのウェブ標準を尊重したFirefoxの開発を開始しました(他のブラウザは、IE6で行われるようにページをレンダリングするように実装されました)。より多くのウェブ開発者が新しいウェブ標準機能を使いたいと思うようになり、より多くのウェブサイトがIEよりもFirefoxでサポートされるようになりました。 IEの市場シェアが低下したとき、MSは標準との互換性がないままでいるのは良い考えではないと気付いた。そこでMSは、Web標準をますます尊重した新しいIEバージョン(IE8/IE9/IE10)をリリースし始めました。 --------------------------------- ウェブとの互換性の問題 --------------------------- しかし、問題は、IE6 で設計されたすべての Web サイトです。Microsoft は、これらの古い IE6 で設計された Web サイトと互換性のない新しい IE バージョンをリリースすることはできませんでした。ウェブサイトがデザインされたIEのバージョンを推測する代わりに、MSは開発者にページに追加のデータ(`X-UA-Compatible`)を追加するように要求しました。 2016年になってもIE6は使われている ------------------------- 現在、IE6はまだ使用されており[(2016年0.7%)][IE62014](2014年1月では4.5%)、インターネットのウェブサイトの中にはまだIE6のみに対応しているものもある。一部のイントラネットWebサイト/アプリケーションは、IE6を使用してテストされています。一部のイントラネットWebサイトは、IE6でのみ100%機能する。これらの企業/部門は、他の優先事項がある、ウェブサイト/アプリケーションがどのように実装されていたか誰も知らない、レガシーウェブサイト/アプリケーションの所有者が倒産した...などの理由で、移行コストを先送りしたいと考えています。 中国では、[2013年のIE6使用率は50%](www.ie6countdown.com/)となっているが、[中国のLinuxディストリビューションが普及しつつある](http://www.canonical.com/content/canonical-and-chinese-standards-body-announce-ubuntu-collaboration)ため、今後数年で変化する可能性がある。 自分のWebスキルに自信を持つ --------------------------------- ウェブの標準を尊重するなら、単純に`http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"`を使えばいいのです。古いブラウザとの互換性を保つには、最新のウェブ機能を使わないようにすればよいのです。つまり、サポートしたい最古のブラウザがサポートするサブセットを使えばよいのです。あるいは、さらに踏み込みたい場合は、[Graceful degradation]、[Progressive enhancement]、[Unobtrusive JavaScript]などのコンセプトを採用するとよいでしょう。(【ウェブ開発者は何を考慮すべきか】もお読みいただければ幸いです)。 ブラウザはウェブ標準に準拠していなければならないので、IEバージョンの最高のレンダリングは気にしなくてもよいでしょう:これはあなたの仕事ではありません。あなたのサイトが標準に準拠しており、適度に最新の機能を使用しているのであれば、**ブラウザはあなたのサイトに準拠していなければなりません**。 さらに、IE6 を死滅させようとする多くのキャンペーン ([IE6 no more](http://www.ie6nomore.com/), [MS campaign](http://www.webmonkey.com/2011/03/microsoft-kicks-off-campaign-to-kill-internet-explorer-6/)) が行われているので、今日では IE テストで時間を無駄にすることはないでしょう。 個人的なIE6の経験 ----------------------- 2009年から2012年にかけて、私はIE6を公式の単一ブラウザとして使用している会社で働いていました。私は、IE6専用のイントラネットWebサイトを実装しなければなりませんでした。私はウェブ標準を尊重しつつ、IE6対応のサブセット(HTML/CSS/JS)を使用することにしました。 苦労しましたが、会社がIE8に移行したときには、Firefoxと[firebug][FB]を使ってWeb標準の互換性をチェックしていたので、Webサイトはしっかりとレンダリングされていました ;) [クララ]: https://stackoverflow.com/users/1400368 [noEdge]: http://msdn.microsoft.com/library/jj676915.aspx#DCModes [MSICON]: http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/features/compatibility-view [IEMS]: http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg [IE6]: http://en.wikipedia.org/wiki/Internet_Explorer#Desktop_Market_share_by_year_and_version [OneStat]: http://www.onestat.com/html/aboutus_pressbox23.html [IE62014]: http://marketshare.hitslink.com/report.aspx?qprid=3&qpaf=&qpcustom=Microsoft+Internet+Explorer+6.0&qpcustomb=0 [FB】: http://en.wikipedia.org/wiki/Firebug_%28software%29 [グレースフル・デグラデーション]: http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement [プログレッシブ・エンハンスメント]: http://en.wikipedia.org/wiki/Progressive_enhancement [Unobtrusive JavaScript]: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript [ウェブ開発者は何を考慮すべきか]: https://softwareengineering.stackexchange.com/questions/46716