Mauvaise valeur Compatible X-UA pour l'attribut http-equiv sur l'élément meta


110

J'ai utilisé le même metaque celui utilisé par HTML5 Boilerplate, et le validateur HTML du W3C se plaint:

Mauvaise valeur Compatible X-UA pour l'attribut http-equiv sur l'élément meta.

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

Quel est le problème avec cette metabalise?


6
Voici un joli article de blog à ce sujet (c'était aussi le premier résultat de recherche que j'ai obtenu): blog.yjl.im/2011/01/…
ComFreek

Réponses:


67

Soit X-UA-Compatible n'est pas du HTML «standard» («standard» de l'OSAV qui consiste à apparaître sur une page wiki publiquement éditable référencée par la spécification) ou le validateur n'est pas à jour avec le statut actuel de ce wiki.

Au moment de la rédaction de cet article (20130326) X-UA-Compatible apparaît sur la page wiki sous une section qui stipule: "Les extensions proposées suivantes ne sont pas encore conformes à toutes les exigences d'enregistrement dans les spécifications HTML et ne sont donc pas encore autorisées en cours de validité documents. " Le validateur a donc raison de rejeter cette valeur.


8
Mauvaise page wiki. Celui vers lequel vous créez un lien est destiné <meta name= .... Pour <meta http-equiv=...la page est wiki.whatwg.org/wiki/PragmaExtensions
Alohci

6
La bonne page wiki contient X-UA-Compatible, donc l'alternative «le validateur n'est pas à jour» s'applique. Même validator.nu (qui a été dit plus à jour en général) est obsolète à cet égard.
Jukka K. Korpela

Merci pour les corrections. Je n'avais pas réalisé que les valeurs des méta-attributs étaient réparties sur deux pages.
Quentin

1
Voir ma réponse pour un exemple de comment patcher le validateur pour prendre en charge X-UA-Compatible. stackoverflow.com/a/21048010/1006963
darcyparker

Alors, comment puis-je résoudre le problème du validateur w3c .. puis-je supprimer la balise?
Krish

42

Si vous cherchez à le rendre techniquement valide (tout le monde aime voir le favicon vert) sans effectuer aucune fonctionnalité, vous devriez pouvoir simplement l'envelopper dans une balise "if IE".

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

22
Cela désactive efficacement votre support Chrome Frame car Chrome Frame ignore les commentaires conditionnels IE, voir jeffreybarke.net/2010/08/…
Jasper Moelker

5
@JasperMoelker: il vaut probablement la peine de mentionner que l'article vers lequel vous avez fourni le lien contient également une solution de contournement pour Chrome Frame, ce qui est fantastique: Validation + support Chrome Frame!
Luke

5
Non non non, cela casse la compatibilité X-UA. xn--mlform-iua.no/blog/…
brentonstrine

30

Une solution possible est d'implémenter un correctif côté serveur dans l'en-tête, comme suggéré dans cette belle rédaction d'Aaron Layton. (Tout le mérite devrait lui revenir, et je paraphraserai plutôt que de plagier ...)

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

"Lorsque Internet Explorer rencontre cette ligne, le moteur qui est utilisé change d'abord Chrome Frame, si le plugin est installé, puis Edge (le mode de document le plus pris en charge par le navigateur)."

Étapes :

  • Correction de la validation de la page - Ceci est réalisé en supprimant simplement la balise
  • Vitesse de rendu - Au lieu d'attendre que le navigateur voie la balise, puis change de mode, nous enverrons le mode correct à l'avance comme en-tête de réponse
  • Assurez-vous que nous affichons uniquement le correctif pour Internet Explorer - Nous allons simplement utiliser une détection de navigateur côté serveur et l'envoyer uniquement à IE

Pour ajouter l'en-tête en PHP, nous pouvons simplement ajouter ceci à notre page:

if (isset($_SERVER['HTTP_USER_AGENT']) &&
    (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
        header('X-UA-Compatible: IE=edge,chrome=1');


Ou vous pouvez l'ajouter à votre fichier .htaccess comme ceci:

<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>


Lien vers l'article original, vérifiez les commentaires pour d'éventuelles mises en garde. Inclut également une implémentation pour C #.

Correction de la mauvaise valeur compatible X-UA une fois pour toutes

J'espère que cela t'aides!


1
Au moment d'écrire ces lignes, cette solution est implémentée dans le fichier HTML5BP .htaccess. Donc, à condition que votre serveur Apache ait activé mod_headers, vous pouvez supprimer en toute sécurité le <meta>du fichier html.
Patrick James McDougle

Si vous utilisez Spring MVC, comme moi, c'est toujours assez facile à faire. Vous recherchez :,response.addHeader("X-UA-Compatible", "IE=edge,chrome=1"); mais voici l'essentiel de github complet .
Paul Nelson Baker

1
@PatrickJamesMcDougle J'ai dû activer les mods headerset setenvifsur mon serveur Apache pour que cela fonctionne.
iglvzx

Est-ce important où cela est ajouté? Cela devrait-il être la toute première chose?
Staysee

1
Responsable du validateur HTML du W3C ici. Si vous mettez "chrome = 1" dans la valeur, la solution dans cette réponse ne fonctionnera plus, car nous avons depuis ajouté une vérification pour l'en-tête également (avec la vérification de l'élément méta), et selon la spécification HTML, à l'un ou l'autre endroit (l'élément méta ou l'en-tête), la seule valeur autorisée est "IE = Edge".
Sideshowbarker


2

.. cela peut-il être une bonne réponse?

Définissez l'en-tête HTTP avec PHP:

Ce n'est pas mon propre travail mais j'espère qu'il sera également utile à d'autres.


7
Notez que les réponses aux liens uniquement sont déconseillées (les liens ont tendance à devenir obsolètes avec le temps). Veuillez envisager de modifier votre réponse et d'ajouter un synopsis ici.
bummi le

1

Si vous téléchargez / compilez le code src du validateur, vous pouvez ajouter le support vous-même.

Ajoutez ce qui suit à un fichier tel que html5-meta-X-UA-Compatible.rnc) Puis incluez-le danshtml5full.rnc .

J'ai fait cela et cela fonctionne bien pour valider.

meta.http-equiv.X-UA-Compatible.elem =
  element meta { meta.inner & meta.http-equiv.X-UA-Compatible.attrs }
  meta.http-equiv.X-UA-Compatible.attrs =
    ( common.attrs.basic
      & common.attrs.i18n
      & common.attrs.present
      & common.attrs.other
      & meta.http-equiv.attrs.http-equiv.X-UA-Compatible
      & meta.http-equiv.attrs.content.X-UA-Compatible
      & ( common.attrs.aria.role.presentation
        | common.attrs.aria.role.menuitem
        )?
    )
    meta.http-equiv.attrs.http-equiv.X-UA-Compatible = attribute http-equiv {
      xsd:string {
        pattern = "X-UA-Compatible"
      }
    }
    meta.http-equiv.attrs.content.X-UA-Compatible = attribute content {
      xsd:string {
        pattern = "IE=((edge)|(EmulateIE(7|8|9|10))|7|8|9|10|11)(,chrome=(1|0))?"
      }
    }

common.elem.metadata |= meta.http-equiv.X-UA-Compatible.elem

0

Veuillez supprimer ,chrome=1de la balise meta cela fonctionnera très bien. Avec validateur:

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

-1

J'ai eu le même problème et ajouter et entourer toute cette ligne a remédié à la situation.

<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->

1
Est-ce que quelqu'un sait pourquoi le vote est défavorable? Cela permet au validateur de fonctionner correctement.
Maciej Paprocki

2
Probablement parce qu'il n'apporte rien. 1. Les commentaires conditionnels ne fonctionnent pas dans IE10 et au-dessus. 2. X-UA-Compatible permet aux nouveaux navigateurs d'émuler les anciens. Donc ce que cette ligne dit effectivement est: 1. IE 10 & 11, rendu en utilisant le mode par défaut (puisqu'ils n'analysent plus les commentaires conditionnels) 2. IE 9, rendu comme IE 9 (c'est-à-dire son mode par défaut dans la plupart des cas). 3. IE <9, rendu en utilisant le mode par défaut (car ils ne peuvent pas émuler un navigateur qui est plus récent qu'ils ne le sont)
aleayr

J'ajouterai également que cela permet au validateur de fonctionner «correctement» car il est à l'intérieur d'un commentaire (donc le validateur l'ignore).
aleayr
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.