X-UA-Compatible est défini sur IE = edge, mais il n'arrête toujours pas le mode de compatibilité

247

Je suis assez confus. Je devrais pouvoir régler

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

et IE8 et IE9 doivent afficher la page en utilisant le dernier moteur de rendu. Cependant, je viens de le tester, et si le mode de compatibilité est activé ailleurs sur notre site, il restera activé pour notre page , même si nous devrions le forcer à ne pas le faire.

Comment êtes-vous censé vous assurer qu'IE n'utilise pas le mode de compatibilité (même dans un intranet)?

FWIW, j'utilise la déclaration HTML5 DocType ( <!doctype html>).

Voici les premières lignes de la page:

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

EDIT: Je viens d'apprendre que le paramètre par défaut sur IE8 est d'utiliser le mode de compatibilité IE7 pour les sites intranet. Cela remplacerait-il la balise META compatible X-UA?

internet-explorer  ie8-compatibility-mode  x-ua-compatible 
— Kerrick
source
J'ai aussi ce problème avec certains de mes utilisateurs, avez-vous déjà compris cela? Mon application n'est cependant pas intranet. Et seulement 20% des utilisateurs l'obtiennent, étrangement.
— Kevin
2
Cela peut être le résultat de votre drôle de balisage <html> (le truc <! - [if lt IE 7]>). Essayez de le supprimer et voyez si cela fonctionne. Voir cette question SO stackoverflow.com/questions/10682827/…
— Dimanche Ironfoot
13
@SundayIronfoot FYI, le balisage de balise <html> amusant auquel vous faites référence est des commentaires IE conditionnels qui sont utilisés pour ajouter une classe CSS à l'élément <html> pour la version appropriée d'IE (le cas échéant) afin que vous puissiez styliser les choses différemment selon les besoins pour les versions IE en préfixant simplement votre déclaration de style avec ".ie7", comme: .ie7 p {width: 200px; } ... c'est un travail plus propre pour résoudre les problèmes de rendu dans les anciennes versions d'IE que d'avoir à utiliser certains des hacks CSS comme * width ou _width. Les navigateurs autres que IE l'ignoreront et utiliseront simplement celui de base.
— Tim Franklin

Réponses:

261

Si vous devez remplacer les paramètres d'affichage de compatibilité d'IE pour les sites intranet, vous pouvez le faire dans le web.config (IIS7) ou via les en-têtes HTTP personnalisés dans les propriétés du site Web (IIS6) et y définir X-UA-Compatible. La balise META ne remplace pas le paramètre intranet d'IE dans les paramètres d'affichage de compatibilité, mais si vous la définissez sur le serveur d'hébergement, elle remplacera la compatibilité.

Exemple pour web.config dans IIS7:

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

Edit : j'ai supprimé le clearcode juste avant le add; c'était un oubli inutile de copier et coller. Bonne prise, commentateurs!

— Tim Franklin
source
5
Juste une note cependant ... Si vous développez en utilisant le serveur Web de développement Visual Studio intégré (alias Cassini), cela ne fonctionnera pas car Cassini n'honore pas la section <system.webServer> du Web. config. Donc, pour le développement, utilisez plutôt IIS Express.
— James Messinger
1
Quelle en est la raison <clear />? Quels en-têtes personnalisés sont effacés par cela?
— M4N
Le clair semble supprimer la <urlCompression...>règle au moins pour moi. Cette règle fait gzipping, ce que je veux donc j'ai commenté le clair. Toute autre information serait agréable.
— Nenotlep
J'ai supprimé le "clair" - bonne prise, c'était une ligne inutile de copier et coller de mon implémentation.
— Tim Franklin
14
PHP:<?php header('X-UA-Compatible: IE=edge'); ?>
— Nux
183

La solution côté serveur est la solution recommandée, comme @TimmyFranks l'a proposé dans sa réponse, mais si l'on doit mettre en œuvre la X-UA-Compatiblerègle au niveau de la page, veuillez lire les conseils suivants, pour bénéficier de l'expérience de celui qui a déjà été brûlé

La X-UA-Compatiblebalise META doit apparaître juste après le titre dans l' <head>élément. Aucune autre balise META, liens css et appels de scripts js ne peuvent être placés avant.

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

S'il y a des commentaires conditionnels dans la page (disons situés dans le <html>), ils doivent être placés sous, après le <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]-->

L'équipe de Html5BoilerPlate a écrit sur ce bug - http://h5bp.com/i/378 Ils ont plusieurs solutions.

En ce qui concerne la vue Intranet et compatibilité, il existe des paramètres lorsque vous accédez à Outils> Paramètres de la vue Compatibilité.

Paramètres d'affichage de compatibilité

— neoswf
source
1
J'ai essayé 4 ou 5 autres réponses sur Stack Overflow, et seule cette combinaison spécifique a fonctionné pour moi. Pour toute personne utilisant WordPress et un plugin SEO, faites attention au plugin réécrivant le <titre> dans un autre emplacement. Edit: Ajout d'un commentaire WordPress
— Mike Ebert
6
X-UA-Compatibledevrait apparaître le plus tôt possible, probablement aprèscharset . Je ne pense pas qu'il soit vrai qu'il "doit apparaître juste après le titre".
— sam
Cette recommandation est le résultat de souffrances sous IE. A été gagné par le sang. Qui a dit qu'IE suit les directives?
— neoswf
4
Wow, cela a fonctionné pour moi et avoir mes balises META juste après la balise de titre est ce qui a fait l'affaire.
— J'aurais aimé
La X-UA-Compatiblebalise META peut apparaître après title, baseet toute autre balise META sans perdre son effet. C'est ce que j'ai testé dans IE8. Cependant, aucun commentaire conditionnel ne peut lui être soumis.
— Rockallite
37

Notez que si vous le servez depuis PHP, vous pouvez également utiliser le code suivant pour le corriger.

header("X-UA-Compatible: IE=Edge");
— TJ L
source
4
Cela fonctionne mieux que l'ajout de la balise meta, car il passe la validation W3C en utilisant cette méthode et est beaucoup plus facile qu'un hack .htaccess.
— Talvi Watia
2
J'ai essayé tout le reste, et c'est ce qui a finalement fonctionné. Je vous remercie.
— Jason
2
Pour ceux sur WordPress, cela peut aider: codex.wordpress.org/Plugin_API/Action_Reference/send_headers
— ambiguousmouse
Cela fonctionne beaucoup mieux aussi quand un énorme site est construit en fonction de <!--[if lt IE 7 ]> <html>...! MERCI! Vous êtes envoyé par Dieu !!
— OZZIE
2
@sunskin - Tout en-tête envoyé par PHP DOIT se produire avant d'envoyer une sortie à la page, c'est-à-dire avant que du HTML ou des données ne soient sortis par PHP.
— TJ L
25

Il s'avère que cela a à voir avec le choix «intelligent» de Microsoft de forcer tous les sites intranet à passer en mode de compatibilité, même s'il X-UA-Compatibleest défini sur IE=edge.

— Kerrick
source
32
Ce n'est pas vrai. Le X-UA-Compatible remplacera le paramètre du mode de compatibilité. Cependant, parfois, l'utilisation de la balise META ne fonctionne pas car le mode a déjà été défini au moment où il le rencontre. C'est pourquoi j'utilise la version d'en-tête HTML, afin que le navigateur puisse activer le mode standard au début du processus.
— Erik Funkenbusch
3
Ajout au commentaire de Mystere Man, vous pouvez le remplacer à partir du serveur d'hébergement en utilisant le web.config ou les en-têtes http personnalisés dans IIS. Voir mon article ci-dessus pour plus de détails.
— Tim Franklin
7
J'ai essayé cela plusieurs fois et il ne remplace pas tous les sites intranet forcés en mode de comparabilité.
— Maess
@Mystere Man: Définissez parfois comme lorsque la page est dans un iframe, où le document parent ne définit pas XUA-COMPAT, et le mode de document est hérité de la page parent (un autre choix MS très intelligent).
— Stefan Steiger
1
@Kerrick: Ce n'est pas la bonne réponse. Voir celui ci-dessous auquel tj111 a répondu pour la bonne réponse.
— dégénéré
9

J'ai également eu le même problème de rendu IE9 dans les normes de document IE7 pour l'hôte local. J'ai essayé de nombreuses balises de commentaires conditionnelles mais sans succès. En fin de compte, je viens de supprimer toutes les balises conditionnelles et j'ai simplement ajouté une méta-balise immédiatement après la tête comme ci-dessous et cela a fonctionné comme un charme.

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

J'espère que ça aide

— Pramod
source
7

Même si vous avez décoché l'option "Afficher les sites intranet dans la vue de compatibilité" et que la compatibilité X-UA est présente dans vos en-têtes de réponse, il y a une autre raison pour laquelle votre navigateur peut par défaut être en "vue de compatibilité" - votre stratégie de groupe. Regardez votre console pour le message suivant:

HTML1203: xxx.xxx a été configuré pour s'exécuter dans la vue de compatibilité via la stratégie de groupe.

Où xxx.xxx est le domaine de votre site (par exemple test.com). Si vous voyez cela, la stratégie de groupe pour votre domaine est définie de sorte que tout site se terminant par test.com s'affiche automatiquement en mode de compatibilité, indépendamment de doctype, des en-têtes, etc.

Pour plus d'informations, veuillez consulter le lien suivant (explique les codes html): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

— rshadman
source
5

Comme le souligne NEOSWF ci-dessus, les commentaires conditionnels de Paul Irish empêchent la balise META d'avoir un effet.

Il existe plusieurs correctifs ici ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Ceux-ci inclus:

Ajout de deux classes HTML, utilisation d'en-têtes de serveur et ajout d'un commentaire conditionnel au-dessus du doctype.

Sur mon dernier projet, j'ai décidé de supprimer les commentaires conditionnels de Paul Irish. Je n'aimais pas l'idée d'ajouter quoi que ce soit avant le html sans faire BEAUCOUP de tests d'abord et c'est agréable de voir ce qui a été défini juste en regardant le HTML.

À la fin, j'ai entouré un div juste après le corps et j'ai utilisé des commentaires conditionnels, par exemple

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

J'aurais pu faire cela autour du corps mais c'est plus difficile avec des CMS comme Wordpress.

Évidemment, c'est une autre DIV à l'intérieur du balisage, mais ce n'est que pour les navigateurs plus anciens.

Je pense que cela pourrait être une décision par projet.

J'ai également lu quelque chose sur la balise meta charset qui doit venir dans les 1024 premiers octets, donc cela garantit cela.

Parfois, les idées les plus simples et les plus faciles à lire sont les meilleures et il vaut vraiment la peine d'y penser! Merci au 6ème commentaire sur le lien ci-dessus pour l'avoir signalé.

— user1010892
source
5

X-UA-Compatiblene remplacera que le mode Document, pas le mode Navigateur, et ne fonctionnera pas pour tous les sites intranet; si tel est votre cas, la meilleure solution consiste à désactiver "Afficher les sites intranet dans la vue de compatibilité" et à définir un paramètre de stratégie de groupe pour spécifier les sites intranet qui ont besoin du mode de compatibilité.

— Tony
source
5

J'ai ajouté ce qui suit à mon fichier htaccess, ce qui a fait l'affaire:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
— Metzed
source
1
cela fonctionne lorsque l'intranet est défini sur la compatibilité. il m'a fallu beaucoup de temps pour trouver quelque chose qui fonctionnerait. spécialement lorsque vous recherchez et que tout est lié à iis
— shorif2000
C'est génial. Je ne savais pas que vous pouviez envoyer des en-têtes avec .htaccess
— Alex W
3

De plus, X-UA-Compatible doit être la première balise META dans la section head

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

Soit dit en passant, l'ordre correct ou les principales balises de tête sont:

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

Par ici

  1. nous définissons le moteur de rendu à utiliser avant que IExplorer ne commence à traiter
  2. le document, puis nous avons défini l'encodage à utiliser pour tous les navigateurs
  3. puis nous imprimons le titre, qui sera traité avec l'encodage déjà défini.
— Leonardo Molina
source
2
En fait, le CHARSET devrait précéder le X-UA-Compatible. Voir blogs.msdn.com/b/ieinternals/archive/2011/07/18/…
— EricLaw
1
Il n'est pas nécessaire que ce soit le premier, mais il doit être proche du sommet. Il peut suivre le titre (et le jeu de caractères, comme Eric l'a noté), mais c'est tout.
— Lance Leonard
dans mon cas sur nginx, cela ne fonctionnera que si le tag compatible X-UA est le premier dans la section head
— Marco Roth
2

Timmy Franks avait raison pour moi. Nous venons d'avoir le problème aujourd'hui où le client avait IE8 à l'échelle de l'entreprise, et cela forçait le site que nous avons écrit pour son intranet en mode de compatibilité. Le réglage de "IE-Edge" semblait le corriger.

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

IE 11 ne vous permet plus de remplacer le paramètre d'affichage de compatibilité du navigateur en envoyant l'en-tête ...

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

Il semble que le seul moyen de forcer le navigateur à ne pas utiliser la vue de compatibilité consiste à demander à l'utilisateur de le désactiver dans son navigateur. Le nôtre est un site Intranet, et l'option IE par défaut consiste à utiliser la vue de compatibilité pour les sites Intranet. Quelle douleur!

Nous avons pu empêcher l'utilisateur de modifier les paramètres de son navigateur pour les utilisateurs d'IE 9 et 10, mais cela ne fonctionne plus dans IE 11. Nos utilisateurs IE passent à Chrome, où ce n'est pas un problème, et n'a jamais été.

— EricP
source
Ce n'est pas qu'il ne le permet pas, IE11ne prend pas en charge d'autres modes de compatibilité que edge. Lien vers la documentation officielle . Cela signifie que nous n'avons plus besoin d'utiliser cette balise META pour masquer le bouton CM sur la barre d'adresse.
— Wallace Sidhrée
4
Faux: IE11 prend toujours en charge tous les modes de compatibilité hérités.
— EricLaw
@EricLaw, la réponse d'EricP est-elle correcte (qu'IE11 modifie le comportement de l'en-tête HTTP compatible X-UA)?
— Matthew Flaschen
@EricP, avez-vous essayé l'en-tête HTTP ou seulement la version de balise <meta>?
— Matthew Flaschen
2
@MatthewFlaschen: Non, EricP est incorrect, tout comme Wallace Sidhree (bien que pour être juste envers Wallace, MSDN n'explique pas ce qu'ils entendent par "obsolète"). Ce qui a changé dans IE11, c'est qu'il n'y a aucun bouton "Affichage de compatibilité" visible ( technet.microsoft.com/en-us/library/dn321449.aspx ) mais les déclarations compatibles X-UA sont toujours respectées.
— EricLaw
1

J'ai pu contourner ce chargement des en-têtes avant le HTML avec php, et cela a très bien fonctionné.

<?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 est le contenu que je voulais charger après l'envoi des en-têtes.

— user3071843
source
1

Je rencontrais le même problème dans IE11. Aucune de ces réponses n'a résolu mon problème. Après avoir creusé un peu, j'ai remarqué que le navigateur fonctionnait en mode Entreprise . (vérifiez en appuyant sur F12 et cliquez sur l'onglet d'émulation, recherchez la liste déroulante du profil du navigateur) Le paramètre a été verrouillé, ne me permettant pas de modifier le paramètre.

J'ai pu changer le profil en bureau après avoir supprimé CurrentVersion de la clé de registre suivante:

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

Après avoir changé le mode Desktop, les réponses à ce message fonctionneront.

— jfatal
source
1

Lorsque votre navigateur s'ouvre avec les modes de compatibilité, même si vous supprimez et désactivez la configuration de tous les modes de compatibilité de votre navigateur Web et de l'éditeur de stratégie de groupe local, vous pouvez essayer de désactiver la clé d'enregistrement.

Cela m'arrive également lors de l'utilisation du domaine et du sous-domaine pour se connecter côté serveur. La machine est limitée à s'ouvrir en mode de compatibilité pour tous les sous-domaines.

DÉSACTIVER LE MODE DE COMPABILITÉ POUR L'INTRANET

HKEY_LOCAL_MACHINE - SOFTWARE - Policies - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode La valeur doit être 0 (zéro) . Et supprimez également le nom de domaine existant de PolicyList.

Sinon, vous pouvez ajouter une nouvelle valeur (DWORD) contenant des données de valeur 0 (zéro) .

— ayciceksamet
source
0

J'ai eu le même problème après avoir essayé de nombreuses combinaisons J'ai eu cette note de travail J'ai vérifié la compatibilité de l'intranet 

<!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
source
0

Si vous utilisez la pile LAMP, ajoutez-la à votre fichier .htaccess dans votre dossier racine Web. Pas besoin de l'ajouter à chaque fichier PHP.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
— Kevin Smith
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.