Kompatibel dengan X-UA diatur ke IE = edge, tetapi tetap tidak menghentikan Mode Kompatibilitas

247

Saya cukup bingung. Saya harus bisa mengatur

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

dan IE8 dan IE9 harus membuat halaman menggunakan mesin rendering terbaru. Namun, saya baru saja mengujinya, dan jika Mode Kompatibilitas dihidupkan di tempat lain di situs kami, itu akan tetap aktif untuk halaman kami , meskipun kami harus memaksanya untuk tidak melakukannya.

Bagaimana Anda memastikan bahwa IE tidak menggunakan Mode Kompatibilitas (bahkan dalam intranet)?

FWIW, saya menggunakan deklarasi DocType HTML5 ( <!doctype html>).

Berikut adalah beberapa baris pertama halaman:

<!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: Saya baru tahu bahwa pengaturan default pada IE8 adalah menggunakan mode kompatibilitas IE7 untuk situs intranet. Apakah ini akan menimpa tag meta yang Kompatibel dengan X-UA?

internet-explorer ie8-compatibility-mode x-ua-compatible Kerrick
sumber
Saya mengalami masalah ini juga dengan beberapa pengguna saya, apakah Anda pernah mengetahuinya? Aplikasi saya bukan intranet. Dan anehnya, hanya 20% pengguna yang mendapatkannya.
Kevin
2
Ini mungkin hasil dari markup tag <html> lucu Anda (<! - [jika IE 7]> barang). Coba hapus dan lihat apakah itu berfungsi. Lihat pertanyaan SO ini stackoverflow.com/questions/10682827/...
Sunday Ironfoot
13
@SundayIronfoot FYI, markup tag <html> lucu yang Anda rujuk adalah komentar IE bersyarat yang digunakan untuk menambahkan kelas CSS ke elemen <html> untuk versi IE yang sesuai (jika berlaku) sehingga Anda dapat mengatur berbagai hal secara berbeda sesuai kebutuhan untuk versi IE hanya dengan mengawali deklarasi gaya Anda dengan ".ie7", seperti: .ie7 p {width: 200px; } ... ini adalah cara yang lebih bersih untuk merender masalah dalam versi IE yang lebih lama daripada harus menggunakan beberapa peretasan CSS seperti * width atau _width. Browser selain IE akan mengabaikannya dan hanya menggunakan yang dasar.
Tim Franklin

Jawaban:

261

Jika Anda perlu mengganti Pengaturan Tampilan Kompatibilitas IE untuk situs intranet, Anda dapat melakukannya di web.config (IIS7) atau melalui header HTTP khusus di properti situs web (IIS6) dan mengatur X-UA-Compatible di sana. Meta tag tidak mengesampingkan pengaturan intranet IE di Pengaturan Tampilan Kompatibilitas, tetapi jika Anda mengaturnya di server hosting itu akan menimpa kompatibilitas.

Contoh untuk web.config di IIS7:

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

Sunting : Saya menghapus clearkode dari sesaat sebelum add; itu adalah pengawasan yang tidak perlu dari menyalin dan menempel. Tangkapan yang bagus, komentator!

Tim Franklin
sumber
5
Hanya sebuah catatan ... Jika Anda mengembangkan menggunakan server web pengembangan Visual Studio bawaan (alias Cassini), maka ini tidak akan berhasil karena Cassini tidak menghormati bagian <system.webServer> dari web. konfigurasi Jadi, untuk pengembangan, gunakan IIS Express sebagai gantinya.
James Messinger
1
Apa alasannya <clear />? Tajuk khusus apa yang dihapus oleh ini?
M4N
Yang jelas sepertinya menghapus <urlCompression...>aturan setidaknya untuk saya. Aturan itu tidak gzipping, yang saya inginkan jadi saya berkomentar dengan jelas. Informasi lebih lanjut akan menyenangkan.
Nenotlep
Saya menghapus 'clear' - tangkapan yang bagus, itu adalah garis yang tidak perlu dari menyalin dan menempel dari implementasi saya.
Tim Franklin
14
PHP:<?php header('X-UA-Compatible: IE=edge'); ?>
Nux
183

Solusi Sisi Server adalah yang disarankan, seperti yang diusulkan @TimmyFranks dalam jawabannya, tetapi jika seseorang perlu menerapkan X-UA-Compatibleaturan pada tingkat halaman, silakan baca kiat-kiat berikut, untuk mendapatkan manfaat dari pengalaman orang yang sudah terbakar

The X-UA-Compatiblemeta tag harus muncul langsung setelah gelar di <head>elemen. Tidak ada tag meta lain, tautan css, dan skrip panggilan js yang dapat ditempatkan sebelumnya.

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

Jika ada komentar kondisional di halaman (misalkan terletak di <html>), mereka harus ditempatkan di bawah, setelah <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]-->

Tim Html5BoilerPlate menulis tentang bug ini - http://h5bp.com/i/378 Mereka memiliki beberapa solusi.

Mengenai tampilan Intranet & Kompatibilitas, ada pengaturan ketika Anda pergi ke alat> Pengaturan tampilan kompatibilitas.

Pengaturan tampilan kompatibilitas

neoswf
sumber
1
Saya telah mencoba 4 atau 5 jawaban lain pada Stack Overflow, dan hanya kombinasi spesifik ini yang bekerja untuk saya. Bagi siapa pun yang menggunakan WordPress dan plugin SEO, berhati-hatilah dengan plugin yang menulis ulang <title> di lokasi lain. Sunting: Menambahkan komentar WordPress
Mike Ebert
6
X-UA-Compatibleharus muncul sedini mungkin, mungkin sesudahnyacharset . Saya tidak berpikir itu benar bahwa "harus muncul tepat setelah judul".
sam
Rekomendasi ini adalah hasil dari penderitaan di bawah IE. Telah diperoleh dengan darah. Siapa bilang IE mengikuti pedoman?
neoswf
4
Wow, ini bekerja untuk saya dan memiliki tag meta saya tepat setelah tag judul adalah triknya. Berharap itu tidak begitu kuno untuk membuat ini bekerja ...
theJerm
The X-UA-Compatiblemeta tag dapat muncul setelah title, basedan meta tag lain tanpa kehilangan efeknya. Inilah yang saya uji di IE8. Tidak ada komentar kondisional yang dapat diberikan sebelumnya.
Rockallite
37

Perhatikan bahwa jika Anda menyajikannya dari PHP, Anda dapat menggunakan kode berikut untuk memperbaikinya juga.

header("X-UA-Compatible: IE=Edge");
TJ L
sumber
4
Ini berfungsi lebih baik daripada menambahkan meta tag, karena melewati validasi W3C menggunakan metode ini dan jauh lebih mudah daripada hack .htaccess.
Talvi Watia
2
Saya mencoba yang lain, dan inilah yang akhirnya berhasil. Terima kasih.
Jason
2
Bagi mereka yang menggunakan WordPress, ini dapat membantu: codex.wordpress.org/Plugin_API/Action_Reference/send_headers
ambiguousmouse
Ini berfungsi jauh lebih baik juga ketika situs besar dibangun tergantung pada <!--[if lt IE 7 ]> <html>...! TERIMA KASIH! Anda adalah dewa yang diutus !!
OZZIE
2
@sunskin - Setiap header yang dikirim oleh PHP HARUS terjadi sebelum mengirim output apa pun ke halaman, yaitu sebelum HTML atau data apa pun dihasilkan oleh PHP.
TJ L
25

Ternyata, ini ada hubungannya dengan Microsoft "cerdas" pilihan untuk membuat semua situs intranet memaksa ke mode kompatibilitas, bahkan jika X-UA-Compatiblediatur ke IE=edge.

Kerrick
sumber
32
Itu tidak benar. X-UA-Compatible akan menggantikan pengaturan mode kompatibilitas. Namun, kadang-kadang menggunakan tag meta tidak berfungsi karena mode telah ditetapkan pada saat bertemu dengannya. Inilah sebabnya saya menggunakan versi header HTML, sehingga browser dapat mengaktifkan mode standar di awal proses.
Erik Funkenbusch
3
Menambahkan ke komentar Mystere Man, Anda dapat menimpanya dari server hosting menggunakan web.config atau header http kustom di IIS. Lihat posting saya di atas untuk detailnya.
Tim Franklin
7
Saya telah mencoba ini beberapa kali dan itu tidak menimpa semua situs intranet yang dipaksa ke mode komparabilitas.
Maess
@Mystere Man: Tetapkan terkadang setiap kali halaman berada dalam iframe, di mana dokumen induk tidak mendefinisikan XUA-COMPAT, dan mode dokumen diwarisi dari halaman induk (pilihan MS lain yang sangat cerdas).
Stefan Steiger
1
@Kerrick: Ini bukan jawaban yang benar. Lihat yang di bawah ini dijawab oleh tj111 untuk jawaban yang benar.
merosot
9

Saya juga mendapat masalah yang sama rendering IE9 dalam standar Dokumen IE7 untuk host lokal. Saya mencoba banyak tag komentar kondisional tetapi tidak berhasil. Pada akhirnya saya hanya menghapus semua tag bersyarat dan baru saja menambahkan meta tag langsung setelah kepala seperti di bawah ini dan itu berfungsi seperti pesona.

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

Semoga ini bisa membantu

Pramod
sumber
7

Bahkan jika Anda telah menghapus centang opsi "Tampilkan situs intranet di Tampilan Kompatibilitas", dan memiliki X-UA-Kompatibel di header respons Anda, ada alasan lain mengapa browser Anda mungkin secara default menjadi "Tampilan Kompatibilitas" - Kebijakan Grup Anda. Lihatlah konsol Anda untuk pesan berikut:

HTML1203: xxx.xxx telah dikonfigurasi untuk dijalankan dalam Tampilan Kompatibilitas melalui Kebijakan Grup.

Di mana xxx.xxx adalah domain untuk situs Anda (mis. Test.com). Jika Anda melihat ini maka kebijakan grup untuk domain Anda diatur sehingga setiap situs yang berakhir dengan test.com akan secara otomatis merender dalam mode Kompatibilitas terlepas dari jenis dokumen, header, dll.

Untuk informasi lebih lanjut, silakan lihat tautan berikut (menjelaskan kode html): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

rshadman
sumber
5

Seperti NEOSWF tunjukkan di atas, komentar bersyarat Paul Irish menghentikan meta tag yang memengaruhi.

Ada beberapa perbaikan di sini ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Ini termasuk:

Menambahkan dua kelas HTML, menggunakan header server dan menambahkan komentar kondisional di atas DOCTYPE.

Pada proyek terbaru saya, saya memutuskan untuk menghapus komentar bersyarat Paul Irish. Saya tidak suka ide menambahkan apa pun sebelum html tanpa melakukan BANYAK pengujian terlebih dahulu dan senang melihat apa yang telah ditetapkan hanya dengan melihat HTML.

Pada akhirnya saya dikelilingi div tepat setelah tubuh dan menggunakan komentar kondisional misalnya

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

Saya bisa melakukan ini di seluruh tubuh tetapi lebih sulit dengan CMS seperti Wordpress.

Jelas ini adalah DIV lain di dalam markup, tetapi ini hanya untuk browser lama.

Saya pikir itu bisa menjadi keputusan berdasarkan proyek.

Saya juga telah membaca sesuatu tentang tag meta charset yang perlu datang dalam 1024 byte pertama jadi ini memastikan hal itu.

Terkadang ide yang paling sederhana, termudah untuk dibaca adalah yang terbaik dan pasti layak untuk dipikirkan! Berkat komentar 6 pada tautan di atas untuk menunjukkan ini.

pengguna1010892
sumber
5

X-UA-Compatiblehanya akan menimpa Mode Dokumen, bukan Mode Browser, dan tidak akan berfungsi untuk semua situs intranet; jika ini kasus Anda, solusi terbaik adalah menonaktifkan "Tampilkan situs intranet dalam Tampilan Kompatibilitas" dan tetapkan pengaturan kebijakan grup untuk menentukan situs intranet mana yang memerlukan mode kompatibilitas.

Tony
sumber
5

Saya menambahkan berikut ini ke file htaccess saya, yang melakukan trik:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
Metzed
sumber
1
ini berfungsi ketika intranet diatur ke kompatibilitas. Butuh waktu lama untuk menemukan sesuatu yang akan berhasil. khususnya ketika Anda mencari dan semuanya terkait
shorif2000
Ini luar biasa. Saya tidak tahu Anda bisa mengirim tajuk dengan .htaccess
Alex W
3

Selain itu, Kompatibel dengan X-UA harus menjadi tag meta pertama di bagian kepala

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

Omong-omong, urutan yang benar atau tag kepala utama adalah:

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

Cara ini

  1. kami mengatur mesin render untuk digunakan sebelum IExplorer mulai memproses
  2. dokumen kemudian kita atur encoding untuk digunakan untuk semua browser
  3. kemudian kami mencetak judul, yang akan diproses dengan pengkodean yang sudah ditentukan.
Leonardo Molina
sumber
2
Sebenarnya, CHARSET harus mendahului X-UA-Compatible. Lihat blogs.msdn.com/b/ieinternals/archive/2011/07/18/...
EricLaw
1
Tidak harus menjadi yang pertama, tetapi harus berada di dekat bagian atas. Itu bisa mengikuti judul (dan charset, seperti yang dicatat Eric), tapi hanya itu.
Lance Leonard
dalam kasus saya di nginx, itu hanya akan berfungsi jika tag X-UA-Compatible-tag adalah yang pertama di bagian kepala
Marco Roth
2

Timmy Franks sudah tepat untukku. Kami baru saja mengalami masalah hari ini di mana klien memiliki IE8 di seluruh perusahaan, dan itu memaksa situs yang kami tulis untuk intranet mereka ke mode kompatibilitas. Pengaturan "IE-Edge" sepertinya memperbaikinya.

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

IE 11 tidak memungkinkan Anda untuk menimpa pengaturan tampilan kompatibilitas browser lagi dengan mengirimkan header ...

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

Tampaknya satu-satunya cara untuk memaksa browser untuk tidak menggunakan tampilan kompatibilitas adalah memiliki pengguna menonaktifkannya di browser mereka. Situs kami adalah situs Intranet, dan opsi default IE adalah menggunakan tampilan kompatibilitas untuk situs Intranet. Sungguh menyakitkan!

Kami dapat mencegah kebutuhan pengguna untuk mengubah pengaturan browser mereka untuk pengguna IE 9 dan 10, tetapi itu tidak lagi berfungsi di IE 11. Pengguna IE kami beralih ke Chrome, di mana ini bukan masalah, dan tidak pernah memiliki telah.

EricP
sumber
Bukannya itu tidak memungkinkan, IE11tidak mendukung Mode Kompatibilitas lain selain edge. Tautan ke dokumentasi resmi . Itu berarti kita tidak perlu menggunakan tag meta itu untuk menyembunyikan tombol CM pada bilah alamat lagi.
Wallace Sidhrée
4
Tidak Benar: IE11 masih mendukung semua Mode Kompatibilitas lawas.
EricLaw
@ EricLaw, apakah jawaban EricP benar (bahwa IE11 mengubah perilaku header HTTP yang Kompatibel dengan X-UA)?
Matthew Flaschen
@EricP, apakah Anda mencoba tajuk HTTP, atau hanya versi tag <meta>?
Matthew Flaschen
2
@MatthewFlaschen: Tidak, EricP salah, seperti Wallace Sidhree (meskipun untuk bersikap adil kepada Wallace, MSDN tidak menjelaskan apa yang mereka maksud dengan "usang"). Apa yang berubah di IE11 adalah bahwa sama sekali tidak ada tombol "Tampilan Kompatibilitas" yang terlihat ( technet.microsoft.com/en-us/library/dn321449.aspx ) tetapi deklarasi X-UA-Compatible masih dihormati.
EricLaw
1

Saya bisa menyelesaikan ini memuat header sebelum HTML dengan php, dan itu bekerja dengan sangat baik.

<?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 adalah konten yang ingin saya muat setelah mengirim tajuk.

pengguna3071843
sumber
1

Saya mengalami masalah yang sama di IE11. Tidak ada jawaban yang memecahkan masalah saya. Setelah menggali sedikit, saya perhatikan bahwa browser sedang berjalan dalam mode Perusahaan . (verifikasi dengan menekan F12 dan klik tab emulasi, cari dropdown profil browser) Pengaturan dikunci, tidak memungkinkan saya untuk mengubah pengaturan.

Saya dapat mengubah profil ke Desktop setelah menghapus CurrentVersion dari kunci registri berikut:

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

Setelah mengubah mode ke Desktop , jawaban pada posting ini akan berfungsi.

jfatal
sumber
1

Ketika browser Anda dibuka dengan Mode Kompatibilitas, bahkan Anda menghapus dan mematikan semua konfigurasi mode kompatibilitas dari browser web Anda dan Editor Kebijakan Grup Lokal, Anda dapat mencoba untuk menonaktifkan dari kunci register.

Ini juga terjadi pada saya saat menggunakan domain dan sub-domain untuk menghubungkan sisi server. Mesin dibatasi untuk membuka dalam mode kompabilitas untuk semua sub-domain.

Nonaktifkan MODE KOMPABILITAS UNTUK INTRANET

HKEY_LOCAL_MACHINE - SOFTWARE - Kebijakan - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode Nilai harus 0 (nol) . Dan juga menghapus nama domain yang ada dari PolicyList.

Jika tidak, Anda dapat menambahkan nilai baru (DWORD) yang berisi data nilai 0 (nol) .

ayciceksamet
sumber
0

Saya memiliki masalah yang sama setelah mencoba banyak kombinasi. Saya memiliki catatan kerja ini dan kompatibilitasnya diperiksa untuk 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">
kapten
sumber
0

Jika Anda menggunakan tumpukan LAMP, tambahkan ini ke file .htaccess Anda di folder root web Anda. Tidak perlu menambahkannya ke setiap file PHP.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
Kevin Smith
sumber