Nilai buruk X-UA-Compatible untuk atribut http-equiv pada meta elemen


110

Saya telah menggunakan yang sama dengan yang digunakan metaBoilerplate HTML5, dan validator HTML W3C mengeluh:

Nilai buruk X-UA-Compatible untuk atribut http-equiv pada meta elemen.

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

Apa yang salah dengan metatag ini ?


6
Ini adalah posting blog yang bagus tentang itu (itu juga hasil pencarian pertama yang saya dapatkan): blog.yjl.im/2011/01/…
ComFreek

Jawaban:


67

Entah Kompatibel dengan X-UA bukan HTML "standar" (FSVO "standar" yang melibatkan kemunculan pada halaman wiki yang dapat diedit secara publik yang direferensikan oleh spesifikasi) atau Validator tidak up-to-date dengan status wiki tersebut saat ini.

Pada saat penulisan (20130326) X-UA-Compatible muncul di halaman wiki di bawah bagian yang menyatakan: "Ekstensi yang diusulkan berikut belum memenuhi semua persyaratan pendaftaran dalam spesifikasi HTML dan oleh karena itu belum diizinkan dalam valid dokumen. " Jadi validator benar untuk menolak nilai ini.


8
Halaman wiki salah. Yang Anda tautkan adalah untuk <meta name= .... Untuk <meta http-equiv=...halamannya adalah wiki.whatwg.org/wiki/PragmaExtensions
Alohci

6
Halaman wiki yang benar memang berisi X-UA-Compatible, jadi alternatif "Validator tidak mutakhir" berlaku. Bahkan validator.nu (yang dikatakan lebih mutakhir secara umum) sudah ketinggalan zaman dalam hal ini.
Jukka K. Korpela

Terima kasih atas koreksinya. Saya tidak menyadari bahwa nilai untuk atribut meta dibagi menjadi dua halaman.
Quentin

1
Lihat jawaban saya untuk contoh cara menambal validator ke dukungan X-UA-Compatible. stackoverflow.com/a/21048010/1006963
darcyparker

jadi bagaimana cara memperbaiki masalah dari validator w3c .. bolehkah saya menghapus tag?
Krish

42

Jika Anda ingin membuatnya valid secara teknis (semua orang suka melihat favicon hijau) tanpa mempengaruhi fungsionalitas apa pun, Anda harus dapat membungkusnya dengan tag "jika IE".

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

22
Ini secara efektif menonaktifkan dukungan Chrome Frame Anda karena Chrome Frame mengabaikan komentar bersyarat IE, lihat jeffreybarke.net/2010/08/…
Jasper Moelker

5
@JasperMoelker: mungkin perlu disebutkan bahwa artikel yang Anda berikan tautannya sebenarnya berisi solusi untuk Chrome Frame juga yang luar biasa: Validasi + dukungan Chrome Frame!
Lukas

5
Tidak tidak tidak, ini merusak X-UA-Compatible. xn--mlform-iua.no/blog/…
brentonstrine

30

Salah satu solusi yang mungkin adalah menerapkan perbaikan sisi server di tajuk, seperti yang disarankan dalam artikel bagus ini oleh Aaron Layton. (Semua pujian harus diberikan kepadanya, dan saya akan memparafrasekan daripada menjiplak ...)

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

"Saat Internet Explorer menemukan baris ini, itu akan mengubah mesin yang digunakan untuk Chrome Frame pertama, jika plugin dipasang, dan kemudian ke Edge (mode dokumen tertinggi yang didukung di browser)."

Langkah-langkahnya :

  • Perbaiki validasi halaman - Ini dicapai hanya dengan menghapus tag
  • Kecepatan rendering - Daripada menunggu browser melihat tag dan kemudian mengubah mode, kami akan mengirimkan mode yang benar di muka sebagai header respons
  • Pastikan bahwa kami hanya menampilkan perbaikan untuk Internet Explorer - Kami hanya akan menggunakan beberapa deteksi browser sisi server dan hanya mengirimkannya ke IE

Untuk menambahkan header di PHP kita bisa menambahkan ini ke halaman kita:

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


Atau Anda dapat menambahkannya ke file .htaccess Anda seperti ini:

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


Tautan ke artikel asli, periksa komentar untuk kemungkinan peringatan. Juga mencakup implementasi untuk C #.

Perbaiki nilai Buruk X-UA-Compatible sekali dan untuk selamanya

Semoga ini membantu!


1
Pada saat penulisan ini, solusi ini diimplementasikan dalam file HTML5BP .htaccess. Jadi, asalkan server Apache Anda mengaktifkan mod_headers, Anda aman untuk menghapusnya <meta>dari file html.
Patrick James McDougle

Jika Anda menggunakan Spring MVC, seperti saya, maka itu masih cukup mudah dilakukan. Anda sedang mencari: response.addHeader("X-UA-Compatible", "IE=edge,chrome=1");, tapi di sini adalah github inti penuh .
Paul Nelson Baker

1
@PatrickJamesMcDougle Saya harus mengaktifkan headersdan setenvifmod di server Apache saya agar ini berfungsi.
iglvzx

Apakah penting di mana ini ditambahkan? Haruskah itu menjadi yang pertama?
Menginap

1
Pemelihara validator HTML W3C di sini. Jika Anda memasukkan "chrome = 1" ke dalam nilai, solusi dalam jawaban ini tidak akan berfungsi lagi, karena kami telah menambahkan tanda centang untuk tajuk juga (bersama dengan pemeriksaan elemen meta), dan sesuai spesifikasi HTML, di salah satu tempat (elemen meta atau tajuk) satu-satunya nilai yang diizinkan adalah "IE = Edge".
tontonanbarker



1

Jika Anda mengunduh / membuat kode src validator, Anda dapat menambahkan dukungan sendiri.

Tambahkan berikut ini ke file seperti html5-meta-X-UA-Compatible.rnc) Kemudian sertakan dalamhtml5full.rnc .

Saya melakukan ini dan berfungsi dengan baik untuk memvalidasi.

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

Harap hapus ,chrome=1dari tag meta, ini akan berfungsi dengan baik. Dengan validator:

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

-1

Saya memiliki masalah yang sama dan menambahkan dan mengelilingi seluruh baris memperbaiki situasinya.

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

1
Adakah yang tahu mengapa suara negatif? Itu sebenarnya membuat validator berfungsi dengan baik.
Maciej Paprocki

2
Mungkin karena sebenarnya tidak mencapai apa-apa. 1. Komentar bersyarat tidak berfungsi di IE10 dan di atasnya. 2. Kompatibel dengan X-UA untuk membuat browser yang lebih baru meniru browser lama. Jadi apa yang baris ini katakan secara efektif adalah: 1. IE 10 & 11, render menggunakan mode default (karena mereka tidak lagi mengurai komentar bersyarat) 2. IE 9, render sebagai IE 9 (yaitu, mode default-nya dalam banyak kasus). 3. IE <9, render menggunakan mode default (karena browser tidak dapat meniru browser yang lebih baru)
aleayr

Saya juga akan menambahkan bahwa itu membuat validator berfungsi 'dengan benar' karena ada di dalam komentar (sehingga validator mengabaikannya).
aleayr
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.