X-UA-CompatibleはIE = edgeに設定されていますが、互換性モードを停止しません

247

私はかなり混乱しています。設定できるはずです

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

IE8とIE9は、最新のレンダリングエンジンを使用してページをレンダリングする必要があります。しかし、私はちょうどそれをテストし、互換性モードが当社のサイト上の他の場所になっている場合、それがために滞在するのページ私たちはしないようにそれを強制する必要があるにもかかわらず、。

IEが互換モード（イントラネット内でも）を使用しないようにするにはどうすればよいですか？

FWIW、私はHTML5 DocType宣言（<!doctype html>）を使用しています。

ページの最初の数行は次のとおりです。

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="innerpage no-js ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="en" class="innerpage no-js ie7"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="en" class="innerpage no-js ie8"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> 
<html lang="en" class="innerpage no-js"> 
<!--<![endif]--> 
    <head> 
        <meta charset="ISO-8859-1" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

編集：私はちょうど学んだ IE8のデフォルト設定では、イントラネットサイト用のIE7互換モードを使用することであること。これはX-UA-Compatibleメタタグを上書きしますか？

internet-explorer  ie8-compatibility-mode  x-ua-compatible 
— ケリック
ソース
一部のユーザーでもこの問題を抱えていますが、これを理解したことはありますか？私のアプリはイントラネットではありません。そして奇妙なことに、ユーザーの20％だけがそれを取得します。
— ケビン
2
これは、おもしろい<html>タグのマークアップ（<！-[if lt IE 7]>など）の結果である可能性があります。削除してみて、機能するかどうかを確認してください。このSOの質問を参照してくださいstackoverflow.com/questions/10682827/...
— 日曜日Ironfoot
13
@SundayIronfoot FYI、参照する面白い<html>タグマークアップは、適切なバージョンのIE（該当する場合）の<html>要素にCSSクラスを追加するために使用される条件付きのIEコメントであり、必要に応じてスタイルを変えることができますIEバージョンの場合、次のように、スタイル宣言の前に ".ie7"を付けるだけです。.ie7 p {width：200px; } ... * widthや_widthなどのCSSハックを使用する必要がない場合よりも、古いIEバージョンでのレンダリングの問題に対するよりクリーンな回避策です。IE以外のブラウザはそれを無視し、基本的なブラウザを使用します。
— Tim Franklin

回答:

261

イントラネットサイトのIEの互換表示設定を上書きする必要がある場合は、web.config（IIS7）またはWebサイトのプロパティ（IIS6）のカスタムHTTPヘッダーを使用して、X-UA-Compatibleを設定できます。メタタグは、互換表示設定のIEのイントラネット設定を上書きしませんが、ホスティングサーバーで設定すると、互換性を上書きします。

IIS7のweb.configの例：

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-UA-Compatible" value="IE=EmulateIE8" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

編集：私clearは直前のコードを削除しましたadd; コピーと貼り付けによる不必要な見落としでした。良いキャッチ、コメント者！

— ティム・フランクリン
ソース
5
ただし、組み込みのVisual Studio開発Webサーバー（別名Cassini）を使用して開発している場合、CassiniはWebの<system.webServer>セクションを受け入れないため、これは機能しません。構成。したがって、開発には代わりにIIS Expressを使用してください。
— James Messinger、
1
の理由は何<clear />ですか？これにより、どのカスタムヘッダーがクリアされますか？
— M4N
クリアは<urlCompression...>少なくとも私にとってルールを削除するようです。そのルールはgzip圧縮を実行します。これは私がしたいので、明確にコメントアウトしました。それ以上の情報があれば素敵です。
— Nenotlep
私は「クリア」を削除しました-良いキャッチ、それは私の実装からのコピーと貼り付けからの不必要な行でした。
— ティム・フランクリン
14
PHP：<?php header('X-UA-Compatible: IE=edge'); ?>
— Nux 2013
183

@TimmyFranksが彼の回答で提案したように、サーバー側のソリューションが推奨されますがX-UA-Compatible、ページレベルでルールを実装する必要がある場合は、次のヒントを読んで、すでにやけどを負った人の経験を活用してください。

の X-UA-Compatibleメタタグがなければなりませんストレートにタイトルの後に表示される<head>要素。他のメタタグ、CSSリンク、JSスクリプトの呼び出しは、その前に置くことはできません。

<head>
    <title>Site Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <script type="text/javascript" src="/jsFile.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" />
    <link rel="shortcut icon" href="https://stackoverflow.com/apple-touch-icon.png" />
</head>

ある場合 ページに条件付きコメント（「にある」としましょう<html>）、コメントはの下に配置する必要があります<head>。

// DON'T: place class inside the HTML tag 
<!--[if gt IE 8]><!--> 
    <html class="aboveIe8"> 
<!--<![endif]-->

// DO: place the class inside the BODY tag
<!--[if gt IE 8]><!--> 
    <body class="aboveIe8"> 
<!--<![endif]-->

Html5BoilerPlateのチームは、このバグについて書いた- http://h5bp.com/i/378 彼らはいくつかのソリューションを持っています。

イントラネットと互換表示については、ツール>互換表示設定に移動すると設定があります。

互換表示設定

— ネオスフ
ソース
1
Stack Overflowで4つまたは5つの他の回答を試しましたが、この特定の組み合わせのみが機能しました。WordPressとSEOプラグインを使用している場合は、プラグインが別の場所にある<title>を書き換えることに注意してください。編集：WordPressコメントを追加
— Mike Ebert
6
X-UA-Compatibleできるだけ早く、おそらく後にcharset表示されます。「タイトルの直後に出なければならない」というのは本当だとは思いません。
— サム
この推奨事項は、IEの影響を受けた結果です。血で得られた。ガイドラインに従ってIEを言うのは誰ですか？
— neoswf 2013
4
うわー、これは私にとってはうまくいきました、そしてタイトルタグの直後に私のメタタグを置くことがトリックをしたものです。この作業を行うのがそれほど古くからなかっ
— たらよかったの
X-UA-Compatibleメタタグが後に表示されることがありtitle、baseその効果を失うことなく、他のMETAタグ。これは、IE8でテストしたものです。ただし、条件付きコメントをその前に置くことはできません。
— Rockallite 2016年
37

PHPから提供する場合は、次のコードを使用して修正することもできます。

header("X-UA-Compatible: IE=Edge");
— TJ L
ソース
4
これはメタタグを追加するよりもうまく機能します。これは、このメソッドを使用したW3C検証に合格し、.htaccessハックよりもはるかに簡単だからです。
— Talvi Watia 2012
2
私は他のすべてを試しました、そしてこれは最終的にうまくいったものでした。ありがとうございました。
— Jason
2
WordPressのユーザーにとっては、これが役立つ場合があります。codex.wordpress.org
— ambiguousmouse
これは、巨大なサイトが<!--[if lt IE 7 ]> <html>...！ありがとうございました！あなたは神に送られました!!
— OZZIE、2014年
2
@sunskin - PHPによって任意のヘッダのて送信はしなければならない任意のHTMLやデータはPHPによって出力される前であること、前のページに任意の出力を送信するに起こります。
— TJ L
25

結局のところ、これは、がに設定されている場合でも、すべてのイントラネットサイトを互換モードに強制するためのMicrosoftの「インテリジェント」選択に関係しています。X-UA-CompatibleIE=edge

— ケリック
ソース
32
それは真実ではない。X-UA-Compatibleは互換モード設定を上書きします。ただし、モードが検出された時点ですでにモードが設定されているため、メタタグを使用しても機能しない場合があります。これが、HTMLヘッダーバージョンを使用する理由です。これにより、ブラウザーはプロセスの早い段階で標準モードを有効にできます。
— エリックファンケンブッシュ
3
Mystere Manのコメントに追加して、web.configまたはIISのカスタムhttpヘッダーを使用してホスティングサーバーからコメントを上書きできます。詳細については、上記の私の投稿を参照してください。
— Tim Franklin
7
私はこれを何度も試しましたが、比較可能モードに強制されたすべてのイントラネットサイトを上書きしません。
— メース
@Mystere Man：親ドキュメントがXUA-COMPATを定義しておらず、ドキュメントモードが親ページから継承されている（別の非常にインテリジェントなMSの選択）、ページがiframeにあるときはいつでも定義します。
— Stefan Steiger 2013
1
@ケリック：これは正解ではありません。正しい答えについては、この下のtj111による回答を参照してください。
— 縮退
9

また、ローカルホストのIE7ドキュメント標準でIE9レンダリングの同じ問題が発生しました。多くの条件付きコメントタグを試しましたが、失敗しました。最後に、すべてのコンディショナルタグを削除し、次のように頭の直後にメタタグを追加しただけで、魅力的に機能しました。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

それが役に立てば幸い

— プラモド
ソース
7

[互換表示でイントラネットサイトを表示する]オプションをオフにしていて、応答ヘッダーにX-UA-Compatibleが含まれている場合でも、ブラウザーのデフォルト設定が常に[互換表示]である別の理由、つまりグループポリシーがあります。コンソールで次のメッセージを確認します。

HTML1203：xxx.xxxは、グループポリシーを介して互換表示で実行するように構成されています。

ここで、xxx.xxxはサイトのドメインです（つまり、test.com）。これが表示された場合、ドメインのグループポリシーが設定されているため、test.comで終わるサイトはすべて、doctype、ヘッダーなどに関係なく互換モードで自動的にレンダリングされます。

詳細については、次のリンク（htmlコードの説明）を参照してください。http：//msdn.microsoft.com/en-us/library/ie/hh180764（v = vs.85）.aspx

— rshadman
ソース
5

NEOSWFが上記のように指摘しているように、ポールアイリッシュの条件付きコメントはメタタグの影響を停止します。

ここにはいくつかの修正があります（http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/）

これらには以下が含まれます：

2つのHTMLクラスを追加し、サーバーヘッダーを使用して、Doctypeの上に条件付きコメントを追加します。

私の最新のプロジェクトでは、ポールアイリッシュの条件付きコメントを削除することにしました。最初に大量のテストを行わずにhtmlの前に何かを追加するのは好きではありませんでした。HTMLを見ただけで何が設定されているかを確認できるのは素晴らしいことです。

最後に、私はdivをボディのすぐ後に囲み、条件付きコメントを使用しました。

  <!--[if IE 7]><div class="ie7"><!--<![endif]-->
  ... regular body stuff
  <!--[if IE 7]></div><!--<![endif]-->

体の周りでこれを行うこともできましたが、WordpressのようなCMSを使用する場合はさらに困難です。

明らかに、マークアップ内の別のDIVですが、それは古いブラウザー専用です。

プロジェクトごとの決定かもしれませんが。

私はまた、最初の1024バイトに来る必要がある文字セットメタタグについて何か読んだので、これはそれを確実にします。

時々、最もシンプルで読みやすいアイデアが最良であり、検討する価値があることは間違いありません。これを指摘してくれた上記のリンクの6番目のコメントに感謝します。

— ユーザー1010892
ソース
5

X-UA-Compatibleドキュメントモードのみをオーバーライドし、ブラウザモードはオーバーライドせず、すべてのイントラネットサイトで機能しません。この場合、最善の解決策は、「イントラネットサイトを互換表示で表示する」を無効にし、グループポリシー設定を設定して、互換モードが必要なイントラネットサイトを指定することです。

— トニー
ソース
5

htaccessファイルに次のコードを追加しました。

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
— メッツ
ソース
1
これは、イントラネットが互換性に設定されている場合に機能します。うまくいくものを見つけるのに長い時間がかかりました。特に検索してすべてが関連している場合
— shorif2000
これは素晴らしいです。.htaccessでヘッダーを送信できることを知りませんでした
— Alex W
3

さらに、X-UA-Compatibleはヘッドセクションの最初のメタタグである必要があります

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>

ちなみに、正しい順序またはメインのヘッドタグは次のとおりです。

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <title>Site Title</title>
    <!-- other tags -->
</head>

こちらです

  1. IExplorerが処理を開始する前に使用するレンダリングエンジンを設定します
  2. 次に、すべてのブラウザで使用するエンコーディングを設定します
  3. 次に、タイトルを印刷します。これは、すでに定義されているエンコーディングで処理されます。
— レオナルド・モリーナ
ソース
2
実際には、CHARSETはX-UA-Compatibleの前に置く必要があります。blogs.msdn.com/b/ieinternals/archive/2011/07/18/…を
— EricLaw
1
最初にする必要はありませんが、上部近くにする必要があります。タイトル（およびエリックが述べたように文字セット）に続くことができますが、それはそれについてです。
— ランスレナード
私の場合、nginxでは、X-UA-Compatible-tagがヘッドセクションの最初にある場合にのみ機能します
— Marco Roth
2

ティミー・フランクスは私にぴったりでした。今日、クライアントが全社的にIE8を使用していて、イントラネット用に作成したサイトを互換モードに強制するという問題が発生しました。「IE-Edge」の設定で直ったようです。

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=Edge" />
  </customHeaders>
</httpProtocol>
— サウスショア
ソース
1

IE 11では、ヘッダーを送信することにより、ブラウザーの互換表示設定を上書きすることはできなくなりました...

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

ブラウザーに互換表示を使用させない唯一の方法は、ユーザーがブラウザーでそれを無効にすることです。私たちのものはイントラネットサイトであり、デフォルトのIEオプションはイントラネットサイトの互換表示を使用することです。なんて痛い！

ユーザーがIE 9および10のユーザーのブラウザー設定を変更する必要をなくすことができましたが、IE 11では機能しなくなりました。IEユーザーはChromeに切り替えていますが、これは問題ではなく、これもありませんされています。

— EricP
ソース
それがそれを許可しない、それIE11以外の互換モードをサポートしないということではありませんedge。公式ドキュメントへのリンク。つまり、そのメタタグを使用してアドレスバーのCMボタンを非表示にする必要がなくなりました。
— WallaceSidhrée2014年
4
正しくない：IE11は引き続きすべてのレガシー互換モードをサポートしています。
— EricLaw 14
@ EricLaw、EricPの答えは正しいですか（IE11がX-UA-Compatible HTTPヘッダーの動作を変更する）？
— マシューFlaschen
@ EricP、HTTPヘッダーを試しましたか、それとも<meta>タグのバージョンのみを試しましたか？
— マシューFlaschen
2
@MatthewFlaschen：いいえ、Wallace Sidhreeと同様に、EricPは正しくありません（Wallaceに対して公平であるとはいえ、MSDNはそれらが「非推奨」であることの意味を説明していません）。IE11で変更された点は、「互換表示」ボタン（technet.microsoft.com/en-us/library/dn321449.aspx）がまったく表示されないことですが、X-UA互換の宣言は引き続き尊重されます。
— EricLaw 14
1

私はこれを回避して、PHPでHTMLの前にヘッダーをロードすることができました。

<?php 
header( 'X-UA-Compatible: IE=edge,chrome=1' );
header( 'content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' );
include('ix.html');
?>

ix.htmlは、ヘッダーの送信後にロードしたいコンテンツです。

— user3071843
ソース
1

IE11でも同じ問題が発生していました。これらの回答のどれも私の問題を解決しませんでした。少し調べたところ、ブラウザがエンタープライズモードで実行されていることに気付きました。（F12を押して確認し、エミュレーションタブをクリックして、ブラウザープロファイルのドロップダウンを探します）設定はロックされており、設定を変更できません。

次のレジストリキーからCurrentVersionを削除した後、プロファイルをデスクトップに変更できました。

HKEY_CURRENT_USER\Software\Policies\Microsoft\Internet Explorer\Main\EnterpriseMode

モードをデスクトップに変更した後、この投稿の回答は機能します。

— jfatal
ソース
1

互換モードでブラウザーが開いたら、Webブラウザーとローカルグループポリシーエディターからすべての互換モード構成を削除してオフにしても、キーの登録を無効にしてみることができます。

これは、ドメインとサブドメインを使用してサーバー側に接続するときにも起こります。マシンは、すべてのサブドメインに対して互換モードで開くように制限されています。

イントラネットの互換モードを無効にする

HKEY_LOCAL_MACHINE-SOFTWARE-ポリシー-Microsoft-Internet Explorer-BrowserEmulation-> IntranetCompalityMode値は0（ゼロ）でなければなりません。また、PolicyListから既存のドメイン名を削除します。

それ以外の場合は、0（ゼロ）値のデータを含む新しい値（DWORD）を追加できます。

— ayciceksamet
ソース
0

多くの組み合わせを試した後、同じ問題が発生しました。イントラネットの互換性をチェックして、このワーキングノートを作成しました 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head runat="server">
— キャプドルマン
ソース
0

LAMPスタックを使用している場合は、これをWebルートフォルダーの.htaccessファイルに追加します。すべてのPHPファイルに追加する必要はありません。

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
— ケビン・スミス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.