Que fait <meta http-equiv = "X-UA-Compatible" content = "IE = edge">?

1439

Quelle est la différence si une page Web commence par

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

et si la page commence par

<!DOCTYPE html> 
<html> 
  <head> 
     <!-- without X-UA-Compatible meta -->

S'il n'y a pas de différence, je suppose que je peux simplement ignorer l'en X-UA-Compatible-tête méta, car je veux juste qu'il soit rendu dans le mode le plus standard dans toutes les versions d'IE.

html internet-explorer browser x-ua-compatible Morgan Cheng
la source

Réponses:

1704

Mise à jour d'octobre 2015

Cette réponse a été publiée il y a plusieurs années et maintenant la question devrait vraiment être si vous envisagez même d'utiliser la X-UA-Compatiblebalise sur votre site? avec les modifications que Microsoft a apportées à ses navigateurs (plus d'informations ci-dessous).

Selon les navigateurs Microsoft que vous prenez en charge, vous n'aurez peut-être pas besoin de continuer à utiliser la X-UA-Compatiblebalise. Si vous devez prendre en charge IE9 ou IE8, je vous recommande d'utiliser la balise. Si vous ne prenez en charge que les derniers navigateurs (IE11 et / ou Edge), j'envisagerais de supprimer complètement cette balise. Si vous utilisez Twitter Bootstrap et devez éliminer les avertissements de validation, cette balise doit apparaître dans l'ordre spécifié. Informations supplémentaires ci-dessous:

La X-UA-Compatiblebalise META permet aux auteurs Web de choisir la version d'Internet Explorer dans laquelle la page doit être rendue. IE11 a apporté des modifications à ces modes; voir la note IE11 ci-dessous. Microsoft Edge , le navigateur qui a remplacé IE11, n'honore la X-UA-Compatiblebalise META que dans certaines circonstances. Voir la note Microsoft Edge ci-dessous.

Selon Microsoft, lors de l'utilisation de la X-UA-Compatiblebalise, elle doit être aussi élevée que possible dans votre document head:

Si vous utilisez la balise META compatible X-UA, vous souhaitez la placer aussi près que possible du haut de la TÊTE de la page. Internet Explorer commence à interpréter le balisage à l'aide de la dernière version. Lorsque Internet Explorer rencontre la balise META compatible X-UA, il recommence à utiliser le moteur de la version désignée. Il s'agit d'un problème de performances car le navigateur doit arrêter et redémarrer l'analyse du contenu.

Voici vos options:

  • "IE = bord"
  • "IE = 11"
  • "IE = EmulateIE11"
  • "IE = 10"
  • "IE = EmulateIE10"
  • "IE = 9"
  • "IE = EmulateIE9
  • "IE = 8"
  • "IE = EmulateIE8"
  • "IE = 7"
  • "IE = EmulateIE7"
  • "IE = 5"

Pour tenter de comprendre ce que chacun signifie, voici les définitions fournies par Microsoft:

Internet Explorer prend en charge un certain nombre de modes de compatibilité des documents qui activent différentes fonctionnalités et peuvent affecter la façon dont le contenu est affiché:

  • Le mode Edge indique à Internet Explorer d'afficher le contenu dans le mode le plus élevé disponible. Avec Internet Explorer 9, cela équivaut au mode IE9. Si une future version d'Internet Explorer prend en charge un mode de compatibilité supérieur, les pages définies en mode Edge apparaissent dans le mode le plus élevé pris en charge par cette version. Ces mêmes pages apparaissent toujours en mode IE9 lorsqu'elles sont affichées avec Internet Explorer 9. Internet Explorer prend en charge un certain nombre de modes de compatibilité des documents qui activent différentes fonctionnalités et peuvent affecter la façon dont le contenu est affiché:

  • Le mode IE11 offre la meilleure prise en charge disponible pour les normes de l'industrie établies et émergentes, y compris HTML5, CSS3 et autres.

  • Le mode IE10 offre la meilleure prise en charge disponible pour les normes industrielles établies et émergentes, y compris HTML5, CSS3 et autres.

  • Le mode IE9 offre la meilleure prise en charge disponible pour les normes de l'industrie établies et émergentes, y compris la spécification HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, etc. [Note de l'éditeur: IE 9 ne prend pas en charge les animations CSS3].

  • Le mode IE8 prend en charge de nombreuses normes établies, notamment la spécification W3C Cascading Style Sheets Level 2.1 et l'API W3C Selectors; il fournit également un support limité pour la spécification de niveau 3 des feuilles de style en cascade du W3C (document de travail) et d'autres normes émergentes.

  • Le mode IE7 rend le contenu comme s'il était affiché en mode standard par Internet Explorer 7, que la page contienne ou non une directive.

  • Le mode émuler IE9 indique à Internet Explorer d'utiliser la directive pour déterminer comment rendre le contenu. Les directives du mode standard sont affichées en mode IE9 et les directives du mode excentrique sont affichées en mode IE5. Contrairement au mode IE9, le mode Emulate IE9 respecte la directive.

  • Le mode émuler IE8 indique à Internet Explorer d'utiliser la directive pour déterminer comment rendre le contenu. Les directives du mode standard sont affichées en mode IE8 et les directives du mode excentrique sont affichées en mode IE5. Contrairement au mode IE8, le mode Emulate IE8 respecte la directive.

  • Le mode Emuler IE7 indique à Internet Explorer d'utiliser la directive pour déterminer comment rendre le contenu. Les directives du mode standard sont affichées en mode standard d'Internet Explorer 7 et les directives du mode excentrique sont affichées en mode IE5. Contrairement au mode IE7, le mode Emuler IE7 respecte la directive. Pour de nombreux sites Web, il s'agit du mode de compatibilité préféré.

  • Le mode IE5 rend le contenu comme s'il était affiché en mode excentrique par Internet Explorer 7, ce qui est très similaire à la façon dont le contenu était affiché dans Microsoft Internet Explorer 5.

IE10 REMARQUE: à partir d'IE10, le mode excentrique se comporte différemment de celui des versions antérieures du navigateur. Dans IE9 et les versions antérieures, le mode excentrique limitait la page Web aux fonctionnalités prises en charge par IE5.5. Dans IE10, le mode excentrique est conforme aux différences spécifiées dans la spécification HTML5.

Personnellement, je choisis toujours la http-equiv="X-UA-Compatible" content="IE=edge"balise META, car les anciennes versions ont beaucoup de bugs, et je ne veux pas qu'IE décide de passer en "mode de compatibilité" et montre mon site comme IE7 vs IE8 ou 9. Je préfère toujours la dernière version de C'EST À DIRE.

IE11

De Microsoft :

À partir d'IE11, le mode bord est le mode de document préféré; il représente le support le plus élevé pour les normes modernes disponibles pour le navigateur.

Utilisez la déclaration de type de document HTML5 pour activer le mode bord:

<!doctype html>

Le mode Edge a été introduit dans Internet Explorer 8 et a été disponible dans chaque version ultérieure. Notez que les fonctionnalités prises en charge par le mode Edge sont limitées à celles prises en charge par la version spécifique du navigateur qui rend le contenu.

À partir d'IE11, les modes de document sont obsolètes et ne devraient plus être utilisés, sauf de façon temporaire. Assurez-vous de mettre à jour les sites qui s'appuient sur les fonctionnalités héritées et les modes de document pour refléter les normes modernes.

Si vous devez cibler un mode de document spécifique pour que votre site fonctionne pendant que vous le retravaillez pour prendre en charge les normes et fonctionnalités modernes, sachez que vous utilisez une fonctionnalité de transition, qui pourrait ne plus être disponible dans les futures versions.

Si vous utilisez actuellement l'en-tête compatible x-ua pour cibler un mode de document hérité, il est possible que votre site ne reflète pas la meilleure expérience disponible avec IE11.

Microsoft Edge (remplacement d'Internet Explorer fourni avec Windows 10)

Informations sur la X-UA-Compatiblebalise META pour la version "Edge" d'IE. De Microsoft :

Présentation du mode de document Edge «vivant»

Comme nous l'avons annoncé en août 2013, nous déconseillons les modes de document à partir d'IE11. Avec nos dernières mises à jour de plate-forme, le besoin de modes de document hérités est principalement limité aux applications Web héritées d'entreprise. Avec les nouvelles modifications architecturales, ces modes de document hérités seront isolés des changements du mode Edge «vivant», ce qui contribuera à garantir un niveau de compatibilité beaucoup plus élevé pour les clients qui dépendent de ces modes et nous aidera à avancer encore plus rapidement sur les améliorations apportées à Edge. . IE honorera toujours les modes de document servis par les sites intranet, les sites de la liste Affichage de compatibilité et lorsqu'il est utilisé avec le mode Entreprise uniquement.

Les sites Internet publics seront rendus avec la nouvelle plate-forme en mode Edge (sans tenir compte de la compatibilité X-UA). Notre objectif est qu'Edge soit le mode de document "vivant" d'ici et aucun autre mode de document ne sera introduit à l'avenir.

Avec les modifications apportées à Microsoft Edge pour ne plus prendre en charge les modes de document dans la plupart des cas, Microsoft dispose d'un outil pour analyser votre site pour vérifier et voir s'il contient du code qui n'est pas compatible avec Edge.

Chrome = 1 Info pour IE

Il y a aussi chrome=1que vous pouvez utiliser ou utiliser conjointement avec l' une des options ci - dessus comme: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">. chrome=1est pour Chrome Frame de Google qui est défini comme:

Google Chrome Frame est un plug-in de navigateur open source. Les utilisateurs qui ont installé le plug-in ont accès aux technologies Web ouvertes de Google Chrome et au moteur JavaScript rapide lorsqu'ils ouvrent des pages dans le navigateur.

Google Chrome Frame améliore parfaitement votre expérience de navigation dans Internet Explorer. Il affiche les sites compatibles avec Google Chrome Frame à l'aide de la technologie de rendu de Google Chrome, vous donnant accès aux dernières fonctionnalités HTML5 ainsi qu'aux performances et aux fonctionnalités de sécurité de Google Chrome sans interrompre en aucune façon votre utilisation habituelle du navigateur.

Lorsque Google Chrome Frame est installé, le Web s'améliore sans que vous ayez à y penser.

Mais pour que ce plug-in fonctionne, vous devez utiliser chrome=1la X-UA-Compatiblebalise META.

Plus d'informations sur Chrome Frame peuvent être trouvées ici .

Remarque: Google Chrome Frame ne fonctionne que pour IE6 à IE9 et a été retiré le 25 février 2014. Plus d'informations peuvent être trouvées ici . Merci à @mck pour le lien.

Validation:

HTML5 :

La page ne sera validée à l'aide du validateur W3 que lors de l'utilisation <meta http-equiv="X-UA-Compatible" content="IE=Edge">. Pour les autres valeurs, il générera l'erreur: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.en d'autres termes, si vous l'avez, IE=edge,chrome=1il ne sera pas validé. J'ignore complètement cette erreur car les navigateurs modernes ignorent simplement cette ligne de code.

Si vous devez avoir un code complètement valide, envisagez de le faire au niveau du serveur en définissant l'en-tête HTTP. À titre de remarque, Microsoft dit, 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). Voir la réponse d' olibre ou la réponse de bitinn pour plus de détails sur la façon de définir un en-tête HTTP.

XHTML

Il n'y a pas de problème de validation lors de l'utilisation <meta http-equiv="X-UA-Compatible" content="IE=Edge" />tant que la balise est correctement fermée (c'est-à-dire />vs >).

Twitter Bootstrap

Cette balise est fortement recommandée par l'équipe Bootstrap depuis au moins 2014, et Bootlint , le linter rédigé par l'équipe twbs continue de lancer un avertissement lorsque la balise est omise. Le linter fait la distinction entre les avertissements et les erreurs et, à ce titre, la gravité de l'omission de cette balise peut être considérée comme mineure.

Pour plus d'informations sur, X-UA-Compatiblevoir Site Web de Microsoft sur la compatibilité des documents .

Pour plus d'informations sur ce que IE prend en charge, consultez caniuse.com .

Pour plus d'informations sur les exigences de Twitter Bootstrap, consultez la page wiki du projet bootlint .

L84
la source
40
Si je n'ai pas "X-UA-Compatible" dans les en-têtes, que se passerait-il?
Morgan Cheng
45
Fondamentalement, ce qui se passe est lorsque vous avez le X-UA-compatible, il indique à IE comment se comporter en ce qui concerne la valeur que vous définissez (IE = bord, etc.) s'il n'est pas là, IE montrera au site comment il pense le mieux, il devrait être affiché . Il peut s'agir du mode de compatibilité ou de la dernière version d'IE. Quoi que Microsoft / IE pense être le meilleur. Ça a du sens?
L84
2
@TravisJ - D'après ma compréhension, le mode le plus élevé disponible signifie essentiellement qu'IE 8 peut prendre en charge les modes IE8, IE9 peut prendre en charge les modes IE9, etc. J'ai ajouté quelques définitions pour chaque mode fourni par Microsoft.
L84
10
@AdrienBe - Je suis entièrement d'accord! Jusqu'à présent, IE 10 a été le meilleur pour moi, mais je méprise toute autre version. Une fois, j'ai eu une mise en page avec des effets autour de 200 à 300 lignes de HTML et environ 20 minutes de codage. Pour que IE fonctionne, j'ai dû ajouter 1000 autres lignes de code (principalement du javascript tiers) et 2-3 heures de travail! Je déteste vraiment IE =>
L84
9
Google Chrome Frame sera retiré en janvier 2014: blog.chromium.org/2013/06/retiring-chrome-frame.html
mck
339

Utiliser content="IE=edge,chrome=1"   Ignorer les autres X-UA-Compatiblemodes

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

  • Aucune icône de compatibilité
    La barre d'adresse IE9 n'affiche pas le bouton Affichage de compatibilité
    et la page n'affiche pas non plus un mélange de menus, d'images et de zones de texte déplacés.

  • Caractéristiques
    Cette balise META est nécessaire pour activer javascript::JSON.parse()sur IE8
    (même lorsqu'elle <!DOCTYPE html>est présente)

  • Exactitude
    Rendu / exécution de HTML moderne / CSS / JavaScript est plus valide (plus agréable).

  • Performances
    Le moteur de rendu Trident devrait fonctionner plus rapidement en mode bord .

Usage

Dans votre HTML

<!DOCTYPE html> 
<html> 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • IE=edge signifie qu'IE doit utiliser la dernière version (de bord) de son moteur de rendu
  • chrome=1signifie qu'IE doit utiliser le moteur de rendu Chrome s'il est installé

Ou mieux dans la configuration de votre serveur web:
(voir aussi la réponse du RiaD )

  • Apache comme proposé par pixeline

    <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>
<IfModule mod_headers.c>
  Header append Vary User-Agent
</IfModule>

  • Nginx tel que proposé par Stef Pause

    server {
  #...
  add_header X-UA-Compatible "IE=Edge,chrome=1";
}

  • Proxy de vernis tel que proposé par Lucas Riutzel

    sub vcl_deliver {
  if( resp.http.Content-Type ~ "text/html" ) {
    set resp.http.X-UA-Compatible = "IE=edge,chrome=1";
  }
}

  • IIS (depuis v7)

    <configuration>
  <system.webServer>
     <httpProtocol>
        <customHeaders>
           <add name="X-UA-Compatible" value="IE=edge,chrome=1" />
        </customHeaders>
     </httpProtocol>
  </system.webServer>
</configuration>

Microsoft recommande le mode Edge depuis IE11

Comme l'a remarqué Lynda (voir les commentaires), les modifications de compatibilité dans IE11 recommandent le mode Edge :

À partir d'IE11, le mode bord est le mode de document préféré; il représente le support le plus élevé pour les normes modernes disponibles pour le navigateur.

Mais la position de Microsoft n'était pas claire. Une autre page MSDN n'a pas recommandé le mode Edge :

Étant donné que le mode Edge force toutes les pages à être ouvertes en mode standard, quelle que soit la version d'Internet Explorer, vous pourriez être tenté de l'utiliser pour toutes les pages consultées avec Internet Explorer. Ne faites pas cela, car l'en- X-UA-Compatibletête n'est pris en charge qu'à partir de Windows Internet Explorer 8.

Au lieu de cela, Microsoft a recommandé d'utiliser <!DOCTYPE html>:

Si vous souhaitez que toutes les versions prises en charge d'Internet Explorer ouvrent vos pages en mode standard, utilisez la déclaration de type de document HTML5 [...]

Comme Ricardo l' explique (dans les commentaires ci-dessous), tout DOCTYPE (HTML4, XHTML1 ...) peut être utilisé pour déclencher le mode Standards, pas seulement le DOCTYPE HTML5. L'important est de toujours avoir un DOCTYPE dans la page.

Clara Onager a même remarqué dans une ancienne version de Spécification des modes de document hérités :

Le mode Edge est destiné à des fins de test uniquement; ne l'utilisez pas dans un environnement de production.

C'est tellement déroutant qu'Usman Y pensait que Clara Onager parlait de:

L'exemple [...] est fourni à titre indicatif seulement; ne l'utilisez pas dans un environnement de production.

<meta http-equiv="X-UA-Compatible" content="IE=7,9,10" >

Eh bien ... Dans le reste de cette réponse, je donne plus d'explications pour expliquer pourquoi l'utilisation content="IE=edge,chrome=1"est une bonne pratique en production.

Histoire

Pendant de nombreuses années (2000 à 2008), la part de marché IE était supérieure à 80% . Et IE v6 était considéré comme une norme de facto (80% à 97% de part de marché en 2003 , 2004, 2005 et 2006 pour IE6 uniquement, plus de part de marché avec toutes les versions d'IE).

Comme IE6 ne respectait pas les normes Web , les développeurs ont dû tester leur site Web en utilisant IE6. Cette situation était excellente pour Microsoft (MS) car les développeurs Web devaient acheter des produits MS (par exemple, IE ne peut pas être utilisé sans acheter Windows), et il était plus rentable de rester non conforme (c'est-à-dire que Microsoft voulait devenir la norme à l'exclusion des autres entreprises).

Par conséquent, de nombreux sites étaient uniquement conformes à IE6, et comme IE n'était pas conforme à la norme Web, tous ces sites Web n'étaient pas bien affichés sur les navigateurs conformes aux normes. Pire encore, de nombreux sites ne nécessitent que IE .

Cependant, à cette époque, Mozilla a commencé le développement de Firefox en respectant autant que possible toutes les normes Web (d'autres navigateurs ont été implémentés pour rendre les pages comme le fait IE6). Comme de plus en plus de développeurs Web souhaitaient utiliser les nouvelles fonctionnalités des normes Web, de plus en plus de sites Web étaient davantage pris en charge par Firefox qu'IE.

Lorsque le partage du marché d'IE diminuait, MS a réalisé que le maintien d'un standard incompatible n'était pas une bonne idée. Par conséquent, MS a commencé à publier une nouvelle version d'IE (IE8 / IE9 / IE10) respectant de plus en plus les normes Web.

Le problème incompatible avec le Web

Mais le problème concerne tous les sites Web conçus pour IE6: Microsoft n'a pas pu publier de nouvelles versions d'IE incompatibles avec ces anciens sites Web conçus pour IE6. Au lieu de déduire la version IE d'un site Web a été conçu, MS a demandé aux développeurs d'ajouter des données supplémentaires ( X-UA-Compatible) dans leurs pages.

IE6 est toujours utilisé en 2016

Aujourd'hui, IE6 est toujours utilisé (0,7% en 2016) (4,5% en janvier 2014), et certains sites Internet sont toujours conformes à IE6 uniquement. Certains sites Web / applications intranet sont testés à l'aide d'IE6. Certains sites intranet sont 100% fonctionnels uniquement sur IE6. Ces entreprises / départements préfèrent reporter le coût de la migration: autres priorités, personne ne sait plus comment le site / application a été implémenté, le propriétaire du site / application hérité a fait faillite ...

La Chine représente 50% de l'utilisation d'IE6 en 2013, mais cela pourrait changer au cours des prochaines années à mesure que la distribution Linux chinoise sera diffusée .

Ayez confiance en vos compétences Web

Si vous (essayez de) respecter la norme Web, vous pouvez toujours l'utiliser http-equiv="X-UA-Compatible" content="IE=edge,chrome=1". Pour conserver la compatibilité avec les anciens navigateurs, évitez simplement d'utiliser les dernières fonctionnalités Web: utilisez le sous-ensemble pris en charge par le navigateur le plus ancien que vous souhaitez prendre en charge. Ou Si vous voulez aller plus loin, vous pouvez adopter des concepts comme la dégradation gracieuse , l' amélioration progressive et le JavaScript discret . (Vous pouvez également être heureux de lire Que doit faire un compte développeur web? .)

Ne vous souciez pas du meilleur rendu de version IE: ce n'est pas votre travail car les navigateurs doivent être conformes aux normes Web. Si votre site est conforme aux normes et utilise des fonctionnalités modérément récentes, les navigateurs doivent donc être conformes à votre site Web .

De plus, comme il existe de nombreuses campagnes pour tuer IE6 ( IE6 plus , campagne MS ), de nos jours, vous pouvez éviter de perdre du temps avec les tests IE!

Expérience personnelle IE6

En 2009-2012, j'ai travaillé pour une entreprise utilisant IE6 comme seul navigateur officiel autorisé . J'ai dû implémenter un site Web intranet pour IE6 uniquement. J'ai décidé de respecter la norme Web mais en utilisant le sous-ensemble compatible IE6 (HTML / CSS / JS).

C'était difficile, mais lorsque la société est passée à IE8, le site Web était toujours bien rendu car j'avais utilisé Firefox et Firebug pour vérifier la compatibilité aux normes Web;)

olibre
la source
2
«Le mode Edge est uniquement destiné à des fins de test; ne l'utilisez pas dans un environnement de production. » Voir msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
Carl Onager
5
Veuillez @ClaraOnager prendre un certain temps pour expliquer ce qui ne va pas dans ma réponse (de votre point de vue). Même si MS ne recommande pas l'utilisation du mode Edge dans l'environnement de production, il y a de bonnes raisons de l'utiliser dans l'environnement de production. Il est important de clarifier techniquement nos meilleures pratiques. J'aime partager mes connaissances et expériences. J'espère que toi aussi. On peut s'améliorer ensemble;) Cheers
olibre
2
Salut @ Ricardo, je suis d'accord avec toi. Microsoft dit "Si vous voulez que toutes les versions prises en charge d'Internet Explorer ouvrent vos pages en mode standard, utilisez HTML5 [...]" dans la section Comprendre les modes de document hérités (voir le conseil ). Peut-être que mon explication n'est pas claire ... Peut-être que j'ai mal compris quelque chose ... J'ai changé mon texte ... Que pensez-vous de mes changements? ça vous va? Que conseillez-vous de changer / améliorer dans ma réponse? Merci pour vos commentaires.
Santé
5
@ClaraOnager ... dans votre première réponse, vous pointez incorrectement, dans la page de référence .. MS dit de ne pas utiliser dans l'environnement de production pour: <meta http-equiv = "X-UA-Compatible" content = "IE = 7, 9,10 "> pas les autres choses Edge.
Usman Younas,
3
À propos du mode Edge utilisé dans l'environnement de production. De Microsoft:Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.
L84
58

La différence est que si vous ne spécifiez que les DOCTYPE, les paramètres d' affichage de compatibilité d'IE ont priorité. Par défaut, ces paramètres forcent tous les sites intranet dans la vue de compatibilité indépendamment de DOCTYPE. Il y a également une case à cocher pour utiliser la vue de compatibilité pour tous les sites Web, indépendamment de DOCTYPE.

Boîte de dialogue Paramètres d'affichage de compatibilité IE

X-UA-Compatibleremplace les paramètres d'affichage de compatibilité, de sorte que la page s'affiche en mode standard, quels que soient les paramètres du navigateur. Cela force le mode standard pour:

  • pages intranet
  • pages Web externes lorsque l'administrateur de l'ordinateur a choisi «Afficher tous les sites Web dans la vue de compatibilité» par défaut - pensez aux grandes entreprises, aux gouvernements, aux universités
  • lorsque vous vous retrouvez involontairement sur la liste d' affichage de compatibilité Microsoft
  • cas où les utilisateurs ont ajouté manuellement votre site Web à la liste dans les paramètres d'affichage de compatibilité

DOCTYPEseul ne peut pas faire cela; vous vous retrouverez dans l'un des modes d'affichage de compatibilité dans ces cas indépendamment de DOCTYPE.

Si la metabalise et l'en-tête HTTP sont spécifiés, la metabalise est prioritaire.

Cette réponse est basée sur l'examen des règles complètes pour décider du mode de document dans IE8 , IE9 et IE10 . Notez que regarder le DOCTYPEest la toute dernière solution de rechange pour décider du mode de document.

andrewdotn
la source
1
Dans le scénario intranet, IE10 s'affiche par défaut en mode de compatibilité. Voir stackoverflow.com/questions/13284083/…. Cette balise n'est pas requise par défaut pour Internet, mais elle est obligatoire (par défaut) lors de l'utilisation de myintenralserver / myapp . Je voulais ajouter ce commentaire, car la différence entre Internet et intranet n'était claire que dans le texte de la capture d'écran, et non dans le texte des réponses sur la page.
yzorg
Vous avez raison, j'aurais dû être plus clair à ce sujet. J'ai réécrit le post; faites-moi savoir s'il y a autre chose que je devrais aborder. Merci!
andrewdotn
Merci! cette réponse est beaucoup plus claire que les autres réponses concernant les sites intranet. D'autres réponses entrent dans les détails techniques pour savoir pourquoi et comment. Je déteste MS IE. Aussi bonne rédaction: un paragraphe explique clairement pourquoi nous avons besoin de la balise META. Bravo
Aniket Inge
3
J'aimerais pouvoir voter une centaine de fois cette réponse. Capture d'écran de sauvetage là. La pression artérielle baisse pendant que je tape ceci ...
EvilDr
Génial génial génial! Merci beaucoup pour cette réponse.
Seanosapien
25

Utilisez ceci pour forcer IE à masquer ce bouton de compatibilité de navigateur ennuyeux dans la barre d'adresse:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
George Filippakos
la source
1
«Le mode Edge est uniquement destiné à des fins de test; ne l'utilisez pas dans un environnement de production. » Voir msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
Carl Onager
4
Pour faire bonne mesure que j'utilise <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">avec la chrome=1directive, elle invite donc les utilisateurs IE6, 7, 8 à installer / utiliser Chrome Frame . Même HTML5 Boilerplate l' utilise.
Ricardo Zea
10
@ClaraOnager Bien que Microsoft le dise, cela ne signifie pas nécessairement qu'ils ont raison. Je l'utilise <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">depuis le jour où il est sorti sans aucun problème. En fait, j'ai déjà sauvé mon équipe et moi-même des centaines de maux de tête en obligeant les utilisateurs IE à utiliser son dernier moteur pour afficher les pages que nous construisons. Contrairement à vous et à Microsoft, je recommande à tout le monde d'utiliser la balise Meta ci-dessus à chaque fois . Tant qu'IE est toujours là, nous serons "forcés" d'utiliser cette balise META: p
Ricardo Zea
Cela a changé avec IE11. Cette version a radicalement changé le monde des navigateurs selon les normes officielles. Il est allé à l'extrême pour ne même pas s'identifier comme Internet Explorer! Maintenant, il dit que c'est "Netscape" et n'inclut rien dans les informations du navigateur pour révéler sa véritable identité. Si vous rencontrez toujours des bizarreries dans le navigateur IE à partir de cette version, vous devez le forcer dans IE10 en définissant <meta http-equiv="X-UA-Compatible" content="IE=10">. Ensuite, il se présente comme Microsoft Internet Explorer.
admiration
face au même problème connexe, si quelqu'un peut m'aider: stackoverflow.com/questions/22013880/…
dsi
25

Comme je ne peux pas ajouter de commentaire à la réponse marquée, je vais simplement poster ceci ici.

En plus de la bonne réponse, vous pouvez en effet la faire valider. Étant donné que cette balise META est uniquement destinée à IE, tout ce que vous devez faire est d'ajouter un conditionnel IE.

<!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->

Cela revient à ajouter n'importe quelle autre instruction conditionnelle IE et ne fonctionne que pour IE et aucun autre navigateur ne sera affecté.

EMurph78
la source
4
Les commentaires conditionnels ne doivent pas être utilisés SAUF pour cibler HTML pour <= IE9. (Cela était vrai même lorsque cette réponse a été écrite)
EKW
18

Je pense que ce schéma de Microsoft explique tout. Pour dire à IE comment rendre le contenu,! DOCTYPE doit fonctionner avec la balise META compatible X-UA. ! DOCTYPE en lui-même n'a aucun effet sur la modification du mode de document IE.

entrez la description de l'image ici

http://ie.microsoft.com/testdrive/ieblog/2010/Mar/02_HowIE8DeterminesDocumentMode_3.png

James Tsai
la source
3
Voici une version mise à jour qui inclut IE9. OMG ... ie.microsoft.com/testdrive/ieblog/2010/Jun/…
Spiralis
3
Et celui-ci inclut IE10: msdn.microsoft.com/en-us/library/ff406036%28v=vs.85%29.aspx Les différents chapitres ont leurs propres organigrammes séparés ...
Spiralis
Vous avez mal lu cet organigramme. En l'absence de X-UA-Compatible, le navigateur recherchera <! DOCTYPE>. S'il en trouve un, il s'affiche en mode standard (aka "EmulateIE8"). Si ce n'est pas le cas, il revient au "Mode Quirks".
Chuck Le Butt
Merci d'avoir téléchargé l'image sur Stackoverflow. Les liens d'origine vers Microsoft sont tous morts.
Elmue
12

Juste pour être complet, vous n'avez pas vraiment besoin de l'ajouter à votre HTML (qui est inconnu http-equiv en HTML5)

Faites cela et ne regardez jamais en arrière (premier exemple pour apache , deuxième pour nginx )

Header set X-UA-Compatible "IE=Edge,chrome=1"

add_header X-UA-Compatible "IE=Edge,chrome=1";
bitinn
la source
2
@HueiTan - Je pense que l'affiche dit que lorsque vous essayez de valider la page en utilisant le validateur W3, il générera une erreur: Bad value X-UA-Compatible for attribute http-equiv on element meta.- Cela ne signifie pas que cela ne fonctionnera pas. Ce n'est tout simplement pas un code valide.
L84
10

Juste une phrase pour dire: demandez à Internet Explorer d'utiliser son dernier moteur de rendu

<meta http-equiv="x-ua-compatible" content="ie=edge">
Bipon Biswas
la source
7 
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Pour que cette ligne fonctionne comme prévu, assurez-vous que:

  1. C'est le premier élément juste après <head>
  2. Aucun commentaire conditionnel n'est utilisé avant la balise META, par exemple sur l' <html>élément

Sinon, certaines versions d'IE l'ignorent simplement.

MISE À JOUR

Ces deux règles sont simplifiées mais elles sont faciles à retenir et à vérifier. Malgré les documents MSDN indiquant que vous pouvez mettre le titre et d'autres balises META avant celui-ci, je ne recommanderais pas de le faire.

Comment le faire fonctionner avec des commentaires conditionnels.

Article intéressant sur l'ordre des éléments dans la tête.(blogs.msdn.com, pour IE)

RÉFÉRENCE

De la documentation MSDN :

Le X-UA-Compatible[...] doit apparaître dans l'en-tête de la page Web (la section HEAD) avant tous les autres éléments, sauf l'élément title et les autres méta-éléments.

ToniTornado
la source
5

si vous utilisez votre site Web sur le même réseau que le serveur, IE aime passer en mode de compatibilité malgré DOCTYPE.
L'ajout meta http-equiv="X-UA-Compatible" content="IE=Edge" désactive ce comportement indésirable.

Łukasz Jakóbiec
la source
Un autre mot pour «même réseau que le serveur» est intranet ... donc fondamentalement IE10 est cassé par défaut pour tous les sites intranet. Voir la capture d'écran dans la réponse @AndrewNeitsch.
yzorg
3

C'est LITTÉRALEMENT 1 requête google , mais voici:

http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx

Comprendre les modes de document hérités

Utilisez la valeur suivante pour afficher la page Web en mode périphérique, qui est le mode le plus standard pris en charge par Internet Explorer, d'Internet Explorer 6 à IE11.

<meta http-equiv="x-ua-compatible" content="IE=edge"

Remarque que cela est fonctionnellement équivalent à l'utilisation du doctype HTML5. Il place Internet Explorer dans le mode de document pris en charge le plus élevé. Edge most est le plus utile pour les sites Web régulièrement entretenus qui sont régulièrement testés pour l'interopérabilité entre plusieurs navigateurs, y compris Internet Explorer.

Remarque À partir d'IE11, le mode de bordure est considéré comme le mode de document préféré. (Dans les versions antérieures, il était considéré comme expérimental.) Pour en savoir plus, voir Les modes de document sont déconseillés. À partir de Windows Internet Explorer 8, certains développeurs Web ont utilisé le méta-élément du mode Edge pour masquer le bouton Affichage de compatibilité dans la barre d'adresse. Depuis IE11, cela n'est plus nécessaire car le bouton a été supprimé de la barre d'adresse. Parce qu'il force toutes les pages à être ouvertes en mode standard, quelle que soit la version d'Internet Explorer, vous pourriez être tenté d'utiliser le mode Edge pour toutes les pages affichées avec Internet Explorer. Ne faites pas cela, car l'en-tête compatible X-UA n'est pris en charge qu'à partir d'Internet Explorer 8.

Conseil Si vous souhaitez que toutes les versions prises en charge d'Internet Explorer ouvrent vos pages en mode standard, utilisez la déclaration de type de document HTML5, comme indiqué dans l'exemple précédent.

Parmi les résultats de recherche figurent également:

Joe Mike
la source
2

2.1.3.5 Balise Meta de compatibilité X-UA et en-tête de réponse HTTP

Cette fonctionnalité ne sera implémentée dans aucune version de Microsoft Edge.

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

Voir https://msdn.microsoft.com/en-us/library/ff955275(v=vs.85).aspx

Oui, je sais que je suis en retard à la fête, mais je viens d'avoir quelques problèmes et discussions, et à la fin mon patron m'a fait retirer la X-UA-Compatiblebalise supprimer de tous les documents sur lesquels je travaillais.

Si ces informations sont obsolètes ou ne sont plus pertinentes, veuillez me corriger.

Shawn Spencer
la source