X-UA-Compatible ist auf IE = edge eingestellt, stoppt jedoch den Kompatibilitätsmodus nicht

247

Ich bin ziemlich verwirrt. Ich sollte einstellen können

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

und IE8 und IE9 sollten die Seite mit der neuesten Rendering-Engine rendern. Ich habe es jedoch gerade getestet, und wenn der Kompatibilitätsmodus an anderer Stelle auf unserer Website aktiviert ist, bleibt er für unsere Seite aktiviert , auch wenn wir ihn dazu zwingen sollten, dies nicht zu tun.

Wie sollen Sie sicherstellen, dass der IE den Kompatibilitätsmodus nicht verwendet (auch nicht in einem Intranet)?

FWIW, ich verwende die HTML5 DocType-Deklaration ( <!doctype html>).

Hier sind die ersten Zeilen der Seite:

<!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" />

BEARBEITEN: Ich habe gerade erfahren, dass die Standardeinstellung in IE8 die Verwendung des IE7-Kompatibilitätsmodus für Intranetsites ist. Würde dies das X-UA-kompatible Meta-Tag überschreiben?

internet-explorer ie8-compatibility-mode x-ua-compatible Kerrick
quelle
Ich habe dieses Problem auch bei einigen meiner Benutzer. Haben Sie das jemals herausgefunden? Meine App ist jedoch kein Intranet. Und seltsamerweise bekommen nur 20% der Benutzer es.
Kevin
2
Dies könnte das Ergebnis Ihres lustigen <html> -Tag-Markups sein (das <! - [wenn es IE 7]> Zeug ist). Versuchen Sie es zu entfernen und prüfen Sie, ob es funktioniert. Siehe diese SO-Frage stackoverflow.com/questions/10682827/…
Sonntag Ironfoot
13
@SundayIronfoot FYI, das lustige <html> -Tag-Markup, auf das Sie verweisen, sind bedingte IE-Kommentare, mit denen dem <html> -Element für die entsprechende IE-Version (falls zutreffend) eine CSS-Klasse hinzugefügt wird, damit Sie die Dinge nach Bedarf anders gestalten können für die IE-Versionen, indem Sie Ihrer Stildeklaration einfach ".ie7" voranstellen, wie: .ie7 p {width: 200px; } ... es ist eine sauberere Lösung für das Rendern von Problemen in älteren IE-Versionen, als einige der CSS-Hacks wie * width oder _width verwenden zu müssen. Andere Browser als IE ignorieren dies und verwenden nur den Basisbrowser.
Tim Franklin

Antworten:

261

Wenn Sie die Einstellungen für die Kompatibilitätsansicht des IE für Intranetsites überschreiben müssen, können Sie dies in der web.config (IIS7) oder über die benutzerdefinierten HTTP-Header in den Eigenschaften der Website (IIS6) tun und dort X-UA-Compatible festlegen. Das Meta-Tag überschreibt nicht die Intranet-Einstellung des IE in den Einstellungen für die Kompatibilitätsansicht. Wenn Sie es jedoch auf dem Hosting-Server festlegen, wird die Kompatibilität überschrieben.

Beispiel für web.config in IIS7:

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

Bearbeiten : Ich habe den clearCode kurz vor dem entfernt add; Es war ein unnötiges Versehen beim Kopieren und Einfügen. Guter Fang, Kommentatoren!

Tim Franklin
quelle
5
Nur eine Anmerkung ... Wenn Sie mit dem integrierten Visual Studio-Entwicklungswebserver (auch bekannt als Cassini) entwickeln, funktioniert dies nicht, da Cassini den Abschnitt <system.webServer> des Webs nicht berücksichtigt. config. Verwenden Sie für die Entwicklung stattdessen IIS Express.
James Messinger
1
Was ist der Grund für die <clear />? Welche benutzerdefinierten Header werden dadurch gelöscht?
M4N
Das Klare scheint die <urlCompression...>Regel zumindest für mich zu entfernen . Diese Regel macht gzipping, was ich will, also habe ich das klar auskommentiert. Jede weitere Information wäre schön.
Nenotlep
Ich habe das "Löschen" entfernt - ein guter Haken, es war eine unnötige Zeile beim Kopieren und Einfügen aus meiner Implementierung.
Tim Franklin
14
PHP:<?php header('X-UA-Compatible: IE=edge'); ?>
Nux
183

Die serverseitige Lösung wird empfohlen, wie @TimmyFranks in seiner Antwort vorgeschlagen hat. Wenn Sie die X-UA-CompatibleRegel jedoch auf Seitenebene implementieren müssen , lesen Sie bitte die folgenden Tipps, um von den Erfahrungen derjenigen zu profitieren, die bereits verbrannt wurden

Das X-UA-CompatibleMeta-Tag muss direkt nach dem Titel im <head>Element erscheinen. Es können keine anderen Meta-Tags, CSS-Links und JS-Skripte aufgerufen werden.

<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>

Wenn auf der Seite bedingte Kommentare vorhanden sind (z. B. in der <html>), müssen diese nach dem <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]-->

Das Team von Html5BoilerPlate hat über diesen Fehler geschrieben - http://h5bp.com/i/378. Es gibt verschiedene Lösungen.

In Bezug auf die Intranet- und Kompatibilitätsansicht gibt es Einstellungen, wenn Sie zu Extras> Einstellungen für die Kompatibilitätsansicht gehen.

Einstellungen der Kompatibilitätsansicht

neoswf
quelle
1
Ich habe 4 oder 5 andere Antworten auf Stack Overflow ausprobiert, und nur diese spezielle Kombination hat für mich funktioniert. Wenn Sie WordPress und ein SEO-Plugin verwenden, achten Sie darauf, dass das Plugin den <title> an einer anderen Stelle neu schreibt. Bearbeiten: WordPress-Kommentar hinzugefügt
Mike Ebert
6
X-UA-Compatiblesollte so früh wie möglich erscheinen, wahrscheinlich danachcharset . Ich denke nicht, dass es wahr ist, dass es "direkt nach dem Titel erscheinen muss".
Sam
Diese Empfehlung ist ein Ergebnis des Leidens unter IE. Durch Blut gewonnen worden. Wer sagt IE nach Richtlinien?
Neoswf
4
Wow, das hat bei mir funktioniert und meine Meta-Tags direkt nach dem Titel-Tag zu haben, war der Trick. Ich wünschte, es wäre nicht so archaisch, diese Arbeit zu machen ...
theJerm
Der X-UA-CompatibleMeta - Tag kann nach erscheinen title, baseund anderen Meta - Tags , ohne seine Wirkung zu verlieren. Das habe ich in IE8 getestet. Es können jedoch keine bedingten Kommentare davor gestellt werden.
Rockallite
37

Beachten Sie, dass Sie den folgenden Code verwenden können, um das Problem zu beheben, wenn Sie es über PHP bereitstellen.

header("X-UA-Compatible: IE=Edge");
TJ L.
quelle
4
Dies funktioniert besser als das Hinzufügen des Meta-Tags, da es die W3C-Validierung mit dieser Methode besteht und viel einfacher ist als ein .htaccess-Hack.
Talvi Watia
2
Ich habe alles andere ausprobiert, und das hat endlich funktioniert. Danke dir.
Jason
2
Für diejenigen auf WordPress kann dies helfen: codex.wordpress.org/Plugin_API/Action_Reference/send_headers
mehrdeutige
Dies funktioniert viel besser, auch wenn je nach <!--[if lt IE 7 ]> <html>...Bedarf eine riesige Site erstellt wird ! DANKE! Du bist von Gott gesandt !!
OZZIE
2
@sunskin - Jeder abgeschickt Header von PHP muss vor passiert jede Ausgabe an der Seite zu senden, dass jeder HTML oder Daten vor der Ausgabe von PHP ist.
TJ L
25

Wie sich herausstellt, hat dies mit der "intelligenten" Wahl von Microsoft zu tun, mit der alle Intranetsites in den Kompatibilitätsmodus versetzt werden, auch wenn dies eingestellt X-UA-Compatibleist IE=edge.

Kerrick
quelle
32
Das ist nicht wahr. Der X-UA-kompatibel überschreibt die Einstellung für den Kompatibilitätsmodus. Manchmal funktioniert die Verwendung des Meta-Tags jedoch nicht, da der Modus zum Zeitpunkt der Begegnung bereits festgelegt wurde. Aus diesem Grund verwende ich die HTML-Header-Version, damit der Browser den Standardmodus frühzeitig aktivieren kann.
Erik Funkenbusch
3
Wenn Sie den Kommentar von Mystere Man ergänzen, können Sie ihn vom Hosting-Server mithilfe der Datei web.config oder der benutzerdefinierten http-Header in IIS überschreiben. Siehe meinen Beitrag oben für Details.
Tim Franklin
7
Ich habe dies mehrmals versucht und es überschreibt nicht alle Intranetsites, die in den Vergleichsmodus versetzt wurden.
Maess
@Mystere Man: Definieren Sie manchmal, wann immer sich die Seite in einem Iframe befindet, in dem das übergeordnete Dokument XUA-COMPAT nicht definiert und der Dokumentmodus von der übergeordneten Seite geerbt wird (eine weitere sehr intelligente MS-Option).
Stefan Steiger
1
@ Kerrick: Dies ist nicht die richtige Antwort. Die richtige Antwort finden Sie in der unten stehenden Antwort von tj111.
entartet
9

Ich habe auch das gleiche Problem mit dem IE9-Rendering in IE7-Dokumentstandards für den lokalen Host. Ich habe viele Tags für bedingte Kommentare ausprobiert, aber erfolglos. Am Ende habe ich einfach alle bedingten Tags entfernt und direkt nach dem Kopf wie unten ein Meta-Tag hinzugefügt, und es hat wie ein Zauber funktioniert.

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

Ich hoffe es hilft

Pramod
quelle
7

Selbst wenn Sie die Option "Intranetsites in der Kompatibilitätsansicht anzeigen" deaktiviert haben und X-UA-kompatibel in Ihren Antwortheadern haben, gibt es einen anderen Grund, warum Ihr Browser möglicherweise sowieso standardmäßig "Kompatibilitätsansicht" verwendet - Ihre Gruppenrichtlinie. Suchen Sie auf Ihrer Konsole nach der folgenden Meldung:

HTML1203: xxx.xxx wurde so konfiguriert, dass es in der Kompatibilitätsansicht über Gruppenrichtlinien ausgeführt wird.

Wobei xxx.xxx die Domain für Ihre Site ist (dh test.com). Wenn Sie dies sehen, wird die Gruppenrichtlinie für Ihre Domain so festgelegt, dass jede Site, die auf test.com endet, automatisch im Kompatibilitätsmodus gerendert wird, unabhängig von Doctype, Headern usw.

Weitere Informationen finden Sie unter folgendem Link (Erläuterungen zu den HTML-Codes): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

rshadman
quelle
5

Wie der NEOSWF oben ausführt, verhindern die bedingten Kommentare von Paul Irish, dass das Meta-Tag Auswirkungen hat.

Hier gibt es mehrere Korrekturen ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Diese beinhalten:

Hinzufügen von zwei HTML-Klassen, Verwenden von Server-Headern und Hinzufügen eines bedingten Kommentars über dem Doctype.

Bei meinem letzten Projekt habe ich beschlossen, die bedingten Kommentare von Paul Irish zu entfernen. Ich mochte die Idee nicht, etwas vor dem HTML-Code hinzuzufügen, ohne vorher VIELE Tests durchzuführen, und es ist schön zu sehen, was eingestellt wurde, indem man sich nur den HTML-Code ansieht.

Am Ende habe ich ein Div direkt hinter dem Körper umgeben und bedingte Kommentare verwendet, z

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

Ich hätte dies rund um den Körper tun können, aber es ist schwieriger mit CMSs wie Wordpress.

Offensichtlich ist es ein weiterer DIV im Markup, aber nur für ältere Browser.

Ich denke, es könnte eine projektbasierte Entscheidung sein.

Ich habe auch etwas über das Zeichensatz-Meta-Tag gelesen, das in den ersten 1024 Bytes kommen muss, damit dies sichergestellt ist.

Manchmal sind die einfachsten und am einfachsten zu lesenden Ideen die besten und es lohnt sich auf jeden Fall, darüber nachzudenken! Vielen Dank an den 6. Kommentar zum obigen Link für diesen Hinweis.

user1010892
quelle
5

X-UA-Compatibleüberschreibt nur den Dokumentmodus, nicht den Browsermodus und funktioniert nicht für alle Intranetsites. In diesem Fall besteht die beste Lösung darin, "Intranetsites in der Kompatibilitätsansicht anzeigen" zu deaktivieren und eine Gruppenrichtlinieneinstellung festzulegen , um anzugeben, welche Intranetsites den Kompatibilitätsmodus benötigen.

Tony
quelle
5

Ich habe meiner htaccess-Datei Folgendes hinzugefügt, was den Trick getan hat:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
Metzed
quelle
1
Dies funktioniert, wenn das Intranet auf Kompatibilität eingestellt ist. Ich habe lange gebraucht, um etwas zu finden, das funktioniert. Besonders wenn Sie suchen und alles in Beziehung steht
shorif2000
Das ist fantastisch. Ich wusste nicht, dass Sie Header mit .htaccess senden können
Alex W
3

Darüber hinaus muss X-UA-kompatibel das erste Meta-Tag im Kopfbereich sein

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

Die richtige Reihenfolge oder die Hauptkopf-Tags sind übrigens:

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

Diesen Weg

  1. Wir setzen die Render-Engine auf Verwendung, bevor der IExplorer mit der Verarbeitung beginnt
  2. Im Dokument legen wir dann die Codierung fest, die für alle Browser verwendet werden soll
  3. dann drucken wir den Titel, der mit der bereits definierten Codierung verarbeitet wird.
Leonardo Molina
quelle
2
Eigentlich sollte das CHARSET dem X-UA-kompatiblen vorausgehen. Siehe blogs.msdn.com/b/ieinternals/archive/2011/07/18/…
EricLaw
1
Es muss nicht das erste sein, aber es muss sich in der Nähe der Spitze befinden. Es kann dem Titel (und dem Zeichensatz, wie Eric bemerkte) folgen, aber das war es auch schon.
Lance Leonard
In meinem Fall auf Nginx wird es nur funktionieren, wenn das X-UA-kompatible Tag das erste im Kopfbereich ist
Marco Roth
2

Timmy Franks hatte es richtig für mich. Wir hatten heute nur das Problem, dass der Client unternehmensweit über IE8 verfügte und die Site, die wir für das Intranet geschrieben haben, in den Kompatibilitätsmodus versetzt wurde. Das Einstellen von "IE-Edge" schien das Problem zu beheben.

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=Edge" />
  </customHeaders>
</httpProtocol>
SouthShoreAK
quelle
1

Mit IE 11 können Sie die Einstellung für die Browserkompatibilitätsansicht nicht mehr überschreiben, indem Sie den Header senden ...

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

Die einzige Möglichkeit, den Browser zu zwingen, die Kompatibilitätsansicht nicht zu verwenden, besteht darin, den Benutzer in seinem Browser deaktivieren zu lassen. Unsere Site ist eine Intranetsite, und die Standard-IE-Option ist die Verwendung der Kompatibilitätsansicht für Intranetsites. Was für ein Schmerz!

Wir konnten verhindern, dass der Benutzer seine Browsereinstellungen für Benutzer von IE 9 und 10 ändern muss, dies funktioniert jedoch nicht mehr in IE 11. Unsere IE-Benutzer wechseln zu Chrome, wo dies kein Problem darstellt und dies nie getan hat gewesen.

EricP
quelle
Es ist nicht so, dass es dies nicht zulässt und IE11keine anderen Kompatibilitätsmodi als unterstützt edge. Link zur offiziellen Dokumentation . Das bedeutet, dass wir dieses Meta-Tag nicht mehr verwenden müssen, um die CM-Schaltfläche in der Adressleiste auszublenden.
Wallace Sidhrée
4
Unwahr: IE11 unterstützt weiterhin alle älteren Kompatibilitätsmodi.
EricLaw
@EricLaw, ist die Antwort von EricP richtig (dass IE11 das Verhalten für den X-UA-kompatiblen HTTP-Header ändert)?
Matthew Flaschen
@EricP, haben Sie den HTTP-Header oder nur die <meta> -Tag-Version ausprobiert?
Matthew Flaschen
2
@MatthewFlaschen: Nein, EricP ist falsch, ebenso wie Wallace Sidhree (obwohl MSDN, um Wallace gegenüber fair zu sein, nicht erklärt, was sie mit "veraltet" meinen). Was sich in IE11 geändert hat, ist, dass es überhaupt keine sichtbare Schaltfläche "Kompatibilitätsansicht" gibt ( technet.microsoft.com/en-us/library/dn321449.aspx ), aber die X-UA-kompatiblen Deklarationen werden weiterhin eingehalten.
EricLaw
1

Ich konnte dies umgehen, indem ich die Header vor dem HTML mit PHP lud, und es funktionierte sehr gut.

<?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 ist der Inhalt, den ich nach dem Senden der Header laden wollte.

user3071843
quelle
1

Ich hatte das gleiche Problem in IE11. Keine dieser Antworten löste mein Problem. Nachdem ich ein bisschen gegraben hatte, bemerkte ich, dass der Browser im Enterprise- Modus lief. (Überprüfen Sie dies, indem Sie F12 drücken und auf die Registerkarte Emulation klicken. Suchen Sie nach dem Dropdown-Menü für das Browserprofil.) Die Einstellung wurde gesperrt, sodass ich die Einstellung nicht ändern konnte.

Ich konnte das Profil nach dem Löschen von CurrentVersion aus dem folgenden Registrierungsschlüssel in Desktop ändern :

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

Nachdem Sie den Modus auf Desktop geändert haben, funktionieren die Antworten in diesem Beitrag.

tödlich
quelle
1

Wenn Ihr Browser mit Kompatibilitätsmodi geöffnet wird, können Sie versuchen, den Registrierungsschlüssel zu deaktivieren, auch wenn Sie alle Konfigurationsmodi aus Ihrem Webbrowser und dem Editor für lokale Gruppenrichtlinien entfernen und deaktivieren.

Dies passiert mir auch bei der Verwendung von Domain und Subdomain, um eine Verbindung zur Serverseite herzustellen. Der Computer darf nur im Kompatibilitätsmodus für alle Subdomänen geöffnet werden.

KOMPABILITÄTSMODUS FÜR INTRANET DEAKTIVIEREN

HKEY_LOCAL_MACHINE - SOFTWARE - Richtlinien - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode Der Wert sollte 0 (Null) sein . Entfernen Sie außerdem den vorhandenen Domänennamen aus der Richtlinienliste.

Andernfalls können Sie einen neuen Wert (DWORD) hinzufügen, der 0 (Null) -Wertdaten enthält .

ayciceksamet
quelle
0

Ich hatte das gleiche Problem, nachdem ich viele Kombinationen ausprobiert hatte. Ich hatte diese Arbeitsnotiz, bei der die Kompatibilität für das Intranet überprüft wurde 

<!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">
Capadleman
quelle
0

Wenn Sie den LAMP-Stack verwenden, fügen Sie diesen in Ihre .htaccess-Datei in Ihrem Webstammordner ein. Sie müssen es nicht zu jeder PHP-Datei hinzufügen.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
Kevin Smith
quelle