Ungültiger Wert X-UA-Kompatibel für das Attribut http-equiv für Element-Meta


110

Ich habe dasselbe verwendet meta, das HTML5 Boilerplate verwendet, und der W3C-HTML-Validator beschwert sich:

Ungültiger Wert X-UA-Kompatibel für das Attribut http-equiv für Element-Meta.

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

Was ist los mit diesem metaTag?


6
Hier ist ein schöner Blog-Beitrag darüber (es war auch das erste Suchergebnis, das ich bekam): blog.yjl.im/2011/01/…
ComFreek

Antworten:


67

Entweder ist X-UA-kompatibel kein "Standard" -HML (FSVO "-Standard", bei dem auf einer öffentlich bearbeitbaren Wiki-Seite angezeigt wird, auf die in der Spezifikation verwiesen wird), oder der Validator ist mit dem aktuellen Status dieses Wikis nicht auf dem neuesten Stand.

Zum Zeitpunkt des Schreibens (20130326) wird X-UA-kompatibel auf der Wiki-Seite in einem Abschnitt angezeigt, in dem Folgendes angegeben ist: "Die folgenden vorgeschlagenen Erweiterungen entsprechen noch nicht allen Registrierungsanforderungen in der HTML-Spezifikation und sind daher noch nicht gültig Unterlagen." Der Validator ist also korrekt, diesen Wert abzulehnen.


8
Falsche Wiki-Seite. Der, auf den Sie verlinken, ist für <meta name= .... Für <meta http-equiv=...die Seite ist wiki.whatwg.org/wiki/PragmaExtensions
Alohci

6
Die richtige Wiki-Seite enthält X-UA-Compatible, daher gilt die Alternative "Der Validator ist nicht auf dem neuesten Stand". Sogar validator.nu (von dem allgemein gesagt wurde, dass es aktueller ist) ist in dieser Hinsicht veraltet.
Jukka K. Korpela

Danke für die Korrekturen. Ich hatte nicht bemerkt, dass die Werte für Metaattribute auf zwei Seiten aufgeteilt waren.
Quentin

1
In meiner Antwort finden Sie ein Beispiel für das Patchen des zu unterstützenden Validators X-UA-Compatible. stackoverflow.com/a/21048010/1006963
darcyparker

Wie kann ich das Problem mit dem w3c-Validator beheben? Kann ich das Tag entfernen?
Krish

42

Wenn Sie es technisch gültig machen möchten (jeder mag es, das grüne Favicon zu sehen), ohne eine Funktionalität zu beeinträchtigen, sollten Sie es einfach in ein "if IE" -Tag einschließen können.

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

22
Dies deaktiviert effektiv Ihre Chrome Frame-Unterstützung, da Chrome Frame IE-bedingte Kommentare ignoriert, siehe jeffreybarke.net/2010/08/…
Jasper Moelker

5
@JasperMoelker: Erwähnenswert ist wahrscheinlich, dass der Artikel, zu dem Sie den Link bereitgestellt haben, auch eine Problemumgehung für Chrome Frame enthält, was fantastisch ist: Validierung + Chrome Frame-Unterstützung!
Luke

5
Nein, nein, nein, dies bricht die X-UA-Kompatibilität. xn--mlform-iua.no/blog/…
Brentonstrine

30

Eine mögliche Lösung besteht darin, eine fixe serverseitige Version im Header zu implementieren, wie in dieser netten Beschreibung von Aaron Layton vorgeschlagen. (Alle Ehre sollte ihm gelten, und ich werde es eher umschreiben als plagiieren ...)

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

"Wenn Internet Explorer auf diese Zeile stößt, ändert sich die Engine, die zuerst für Chrome Frame verwendet wird, wenn das Plugin installiert ist, und dann für Edge (den am höchsten unterstützten Dokumentmodus des Browsers)."

Schritte :

  • Korrektur der Seitenüberprüfung - Dies wird durch einfaches Entfernen des Tags erreicht
  • Rendergeschwindigkeit - Anstatt darauf zu warten, dass der Browser das Tag sieht und dann den Modus ändert, senden wir den richtigen Modus im Voraus als Antwortheader
  • Stellen Sie sicher, dass nur das Update für Internet Explorer angezeigt wird. Wir verwenden nur eine serverseitige Browsererkennung und senden sie nur an den Internet Explorer

Um den Header in PHP hinzuzufügen, können wir diesen einfach zu unserer Seite hinzufügen:

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


Oder Sie können es wie folgt zu Ihrer .htaccess-Datei hinzufügen:

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


Link zum Originalartikel, überprüfen Sie die Kommentare auf mögliche Einschränkungen. Enthält auch eine Implementierung für C #.

Fix Schlechter Wert X-UA-kompatibel ein für alle Mal

Hoffe das hilft!


1
Zum Zeitpunkt dieses Schreibens ist diese Lösung in der HTML5BP .htaccess-Datei implementiert. Vorausgesetzt, auf Ihrem Apache-Server sind mod_headers aktiviert, können Sie <meta>die Datei sicher aus der HTML-Datei entfernen .
Patrick James McDougle

Wenn Sie wie ich Spring MVC verwenden, ist dies immer noch recht einfach. Sie suchen : response.addHeader("X-UA-Compatible", "IE=edge,chrome=1");, aber hier ist ein vollständiger Github-Kern .
Paul Nelson Baker

1
@PatrickJamesMcDougle Ich musste sowohl die headersals auch die setenvifMods auf meinem Apache-Server aktivieren , damit dies funktioniert.
iglvzx

Ist es wichtig, wo dies hinzugefügt wird? Sollte es das allererste sein?
Staysee

1
W3C HTML Validator Betreuer hier. Wenn Sie "chrome = 1" in den Wert eingeben, funktioniert die Lösung in dieser Antwort nicht mehr, da wir seitdem auch eine Prüfung für den Header (zusammen mit der Prüfung des Metaelements) und hinzugefügt haben Gemäß der HTML-Spezifikation ist an beiden Stellen (dem Metaelement oder dem Header) der einzige zulässige Wert "IE = Edge".
Sideshowbarker


2

.. kann das eine gute Antwort sein?

HTTP-Header mit PHP einstellen:

Dies ist nicht meine eigene Arbeit, aber ich hoffe, dass sie auch für andere nützlich ist.


7
Beachten Sie, dass von Antworten nur mit Links abgeraten wird (Links werden im Laufe der Zeit veraltet). Bitte bearbeiten Sie Ihre Antwort und fügen Sie hier eine Zusammenfassung hinzu.
Bummi

1

Wenn Sie den Validator-Quellcode herunterladen / erstellen, können Sie selbst Unterstützung hinzufügen.

Fügen Sie einer Datei Folgendes hinzu, z. B. html5-meta-X-UA-Compatible.rnc) Fügen Sie es dann in ein html5full.rnc.

Ich habe das gemacht und es funktioniert gut für die Validierung.

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

Bitte entfernen Sie ,chrome=1aus dem Meta-Tag, es wird gut funktionieren. Mit Validator:

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

-1

Ich hatte das gleiche Problem und das Hinzufügen und Umgeben dieser gesamten Linie behebt die Situation.

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

1
Weiß jemand, warum herabgestimmt wird? Dadurch funktioniert der Validator tatsächlich ordnungsgemäß.
Maciej Paprocki

2
Wahrscheinlich, weil es eigentlich nichts erreicht. 1. Bedingte Kommentare funktionieren in IE10 und höher nicht. 2. Mit X-UA-kompatibel können neuere Browser ältere emulieren. In dieser Zeile heißt es also effektiv: 1. IE 10 & 11, Rendern im Standardmodus (da sie keine bedingten Kommentare mehr analysieren) 2. IE 9, Rendern als IE 9 (dh in den meisten Fällen der Standardmodus). 3. IE <9, Rendern im Standardmodus (da sie keinen Browser emulieren können, der neuer als sie ist)
aleayr

Ich werde auch hinzufügen, dass der Validator dadurch "richtig" funktioniert, weil er sich in einem Kommentar befindet (daher ignoriert der Validator ihn).
Aleayr
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.