Kompatybilny z X-UA jest ustawiony na IE = edge, ale nadal nie zatrzymuje trybu zgodności

247

Jestem całkiem zdezorientowany. Powinienem być w stanie ustawić

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

a IE8 i IE9 powinny renderować stronę przy użyciu najnowszego silnika renderowania. Jednak właśnie go przetestowałem i jeśli tryb zgodności zostanie włączony gdzie indziej w naszej witrynie, pozostanie włączony dla naszej strony , nawet jeśli powinniśmy go do tego zmuszać.

Jak masz się upewnić, że IE nie używa trybu zgodności (nawet w intranecie)?

FWIW, używam deklaracji HTMLT DocType ( <!doctype html>).

Oto kilka pierwszych wierszy strony:

<!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" />

EDYCJA: Właśnie dowiedziałem się, że domyślnym ustawieniem IE8 jest używanie trybu zgodności IE7 dla stron intranetowych. Czy zastąpiłoby to metatag zgodny z X-UA?

internet-explorer ie8-compatibility-mode x-ua-compatible Kerrick
źródło
Mam również ten problem z niektórymi moimi użytkownikami, czy kiedykolwiek to rozgryzłeś? Moja aplikacja nie jest jednak intranetowa. I dziwnie, że tylko około 20% użytkowników je dostaje.
Kevin
2
Może to wynikać z twojego zabawnego znacznika <html> (<! - [if lt 7]> rzeczy). Spróbuj go usunąć i sprawdź, czy działa. Zobacz to pytanie SO stackoverflow.com/questions/10682827/…
Niedziela Ironfoot
13
@SundayIronfoot FYI, zabawne znaczniki <html>, do których się odwołujesz, to warunkowe komentarze IE, które służą do dodania klasy CSS do elementu <html> dla odpowiedniej wersji IE (jeśli dotyczy), dzięki czemu możesz stylizować różne elementy w zależności od potrzeb dla wersji IE, po prostu poprzedzając deklarację stylu „.ie7”, na przykład: .ie7 p {width: 200px; } ... to czystsze obejście problemów z renderowaniem w starszych wersjach IE niż konieczność korzystania z niektórych hacków CSS, takich jak * width lub _width. Przeglądarki inne niż IE zignorują to i po prostu użyją podstawowej.
Tim Franklin

Odpowiedzi:

261

Jeśli chcesz zastąpić ustawienia widoku zgodności IE dla witryn intranetowych, możesz to zrobić w pliku web.config (IIS7) lub za pomocą niestandardowych nagłówków HTTP we właściwościach strony internetowej (IIS6) i ustawić tam zgodność X-UA. Metatag nie zastępuje ustawienia intranetu IE w ustawieniach widoku zgodności, ale jeśli ustawisz go na serwerze hostingowym, zastąpi on zgodność.

Przykład web.config w IIS7:

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

Edycja : usunąłem clearkod tuż przed add; kopiowanie i wklejanie było niepotrzebnym niedopatrzeniem. Dobry chwyt, komentatorzy!

Tim Franklin
źródło
5
Ale tylko uwaga ... Jeśli programujesz przy użyciu wbudowanego serwera programowania Visual Studio (aka Cassini), to nie zadziała, ponieważ Cassini nie honoruje sekcji <system.webServer> w sieci. config. W związku z tym do programowania użyj zamiast tego IIS Express.
James Messinger
1
Jaki jest powód <clear />? Jakie niestandardowe nagłówki są przez to usuwane?
M4N,
Jasne wydaje się, że <urlCompression...>przynajmniej dla mnie usuwa to regułę. Ta zasada robi gzipowanie, czego chcę, więc skomentowałem to jasno. Wszelkie dalsze informacje byłyby urocze.
Nenotlep
Usunąłem „wyczyść” - dobry haczyk, to była niepotrzebna linia do kopiowania i wklejania z mojej implementacji.
Tim Franklin
14
PHP:<?php header('X-UA-Compatible: IE=edge'); ?>
Nux
183

Zalecane jest rozwiązanie po stronie serwera, jak zaproponował @TimmyFranks w swojej odpowiedzi, ale jeśli trzeba wdrożyć X-UA-Compatibleregułę na poziomie strony, przeczytaj poniższe wskazówki, aby skorzystać z doświadczenia osoby, która już została spalona

X-UA-CompatibleTag musi pojawić się zaraz po tytuł w <head>elemencie. Nie można przed nim umieszczać żadnych innych metatagów, łączy css i wywołań skryptów js.

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

Jeśli na stronie znajdują się komentarze warunkowe (powiedzmy, że znajdują się w <html>), należy je umieścić pod, po <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]-->

Zespół Html5BoilerPlate napisał o tym błędzie - http://h5bp.com/i/378 Mają kilka rozwiązań.

Jeśli chodzi o widok intranetowy i widok zgodności, ustawienia znajdują się w menu Narzędzia> Ustawienia widoku zgodności.

Ustawienia widoku zgodności

neoswf
źródło
1
Wypróbowałem 4 lub 5 innych odpowiedzi na temat przepełnienia stosu i tylko ta konkretna kombinacja działała dla mnie. Każdemu, kto używa WordPressa i wtyczki SEO, należy uważać, aby wtyczka przepisała <title> w innym miejscu. Edycja: Dodano komentarz WordPress
Mike Ebert,
6
X-UA-Compatiblepowinien pojawić się jak najwcześniej, prawdopodobnie późniejcharset . Nie sądzę, że to prawda, że ​​„musi pojawić się bezpośrednio po tytule”.
sam
To zalecenie jest wynikiem cierpienia z powodu IE. Zostały zdobyte przez krew. Kto mówi, że IE postępuje zgodnie z wytycznymi?
neoswf
4
Wow, to zadziałało dla mnie i posiadanie moich metatagów zaraz po tagu tytułowym było tym, co zrobiło. Szkoda, że ​​nie było tak archaiczne, aby to zadziałało ...
The
X-UA-CompatibleTag może pojawić się po title, basea wszelkie inne znaczniki meta bez utraty efektu. To właśnie przetestowałem w IE8. Nie można jednak dodawać żadnych komentarzy warunkowych.
Rockallite
37

Zauważ, że jeśli podajesz go z PHP, możesz użyć następującego kodu, aby go naprawić.

header("X-UA-Compatible: IE=Edge");
TJ L.
źródło
4
Działa to lepiej niż dodawanie metatagu, ponieważ przechodzi walidację W3C przy użyciu tej metody i jest znacznie łatwiejsze niż włamanie .htaccess.
Talvi Watia,
2
Próbowałem już wszystkiego i to w końcu zadziałało. Dziękuję Ci.
Jason
2
Dla osób korzystających z WordPress może to pomóc: codex.wordpress.org/Plugin_API/Action_Reference/send_headers
niejednoznaczny
Działa to o wiele lepiej również w przypadku budowy ogromnej witryny w zależności od <!--[if lt IE 7 ]> <html>...! DZIĘKUJĘ CI! Jesteś posłany przez Boga !!
OZZIE
2
@sunskin - Każdy nagłówek wysłany przez PHP MUSI się zdarzyć przed wysłaniem jakichkolwiek danych wyjściowych na stronę, to znaczy przed wysłaniem jakiegokolwiek kodu HTML lub danych przez PHP.
TJ L,
25

Jak się okazuje, ma to związek z „inteligentnym” wyborem Microsoftu, aby wszystkie witryny intranetowe wymusiły przejście do trybu zgodności, nawet jeśli X-UA-Compatiblejest ustawiony naIE=edge .

Kerrick
źródło
32
To nieprawda. Kompatybilny z X-UA zastąpi ustawienie trybu zgodności. Czasami jednak użycie metatagu nie działa, ponieważ tryb został już ustawiony do czasu jego napotkania. Dlatego używam wersji nagłówka HTML, aby przeglądarka mogła włączyć tryb standardów na wczesnym etapie procesu.
Erik Funkenbusch
3
Dodając do komentarza Mystere Man, możesz zastąpić go z serwera hostingowego za pomocą web.config lub niestandardowych nagłówków http w IIS. Zobacz mój post powyżej, aby uzyskać szczegółowe informacje.
Tim Franklin,
7
Próbowałem tego wiele razy i nie zastępuje to wszystkich witryn intranetowych zmuszonych do trybu porównywalności.
Maess,
@Mystere Man: Zdefiniuj czasami, tak jak za każdym razem, gdy strona znajduje się w ramce iframe, w której dokument nadrzędny nie definiuje XUA-COMPAT, a tryb dokumentu jest dziedziczony ze strony nadrzędnej (kolejny bardzo inteligentny wybór MS).
Stefan Steiger
1
@Kerrick: To nie jest poprawna odpowiedź. Zobacz odpowiedź poniżej, na którą odpowiedział tj111, aby uzyskać poprawną odpowiedź.
zdegenerowany
9

Mam również ten sam problem z renderowaniem IE9 w standardach dokumentów IE7 dla lokalnego hosta. Próbowałem wielu tagów komentarzy warunkowych, ale bezskutecznie. W końcu właśnie usunąłem wszystkie tagi warunkowe i dodałem metatag natychmiast po głowie, jak poniżej, i działało to jak urok.

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

Mam nadzieję, że to pomoże

Pramod
źródło
7

Nawet jeśli odznaczyłeś opcję „Wyświetlaj strony intranetowe w widoku zgodności” i masz nagłówki odpowiedzi zgodne z X-UA, jest jeszcze jeden powód, dla którego przeglądarka może i tak ustawić domyślnie „Widok zgodności” - Twoje zasady grupy. Spójrz na swoją konsolę, aby zobaczyć następujący komunikat:

HTML1203: xxx.xxx został skonfigurowany do działania w widoku zgodności za pośrednictwem zasad grupy.

Gdzie xxx.xxx to domena Twojej witryny (tj. Test.com). Jeśli to zobaczysz, zasady grupy dla Twojej domeny są ustawione tak, aby każda witryna kończąca się test.com była automatycznie renderowana w trybie zgodności niezależnie od typu dokumentu, nagłówków itp.

Aby uzyskać więcej informacji, zobacz następujący link (wyjaśnia kody HTML): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

rshadman
źródło
5

Jak wskazuje NEOSWF powyżej, warunkowe komentarze Paula Irlandzkiego zapobiegają wpływowi metatagu.

Jest tu kilka poprawek ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Obejmują one:

Dodanie dwóch klas HTML, użycie nagłówków serwera i dodanie komentarza warunkowego nad typem doc.

W moim ostatnim projekcie postanowiłem usunąć warunkowe komentarze Paula Irisha. Nie podobał mi się pomysł dodania czegokolwiek przed HTML bez wykonywania WIELE testów najpierw i fajnie jest zobaczyć, co zostało ustawione, patrząc tylko na HTML.

W końcu otoczyłem div bezpośrednio po ciele i użyłem komentarzy warunkowych np

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

Mógłbym to zrobić na całym ciele, ale jest to trudniejsze w przypadku CMS, takich jak Wordpress.

Oczywiście jest to kolejny DIV wewnątrz znaczników, ale tylko dla starszych przeglądarek.

Myślę jednak, że może to być decyzja oparta na projekcie.

Przeczytałem też coś o metatagu charset, który musi pojawić się w pierwszych 1024 bajtach, więc to zapewnia.

Czasami najprostsze i najłatwiejsze do odczytania pomysły są najlepsze i zdecydowanie warto o tym pomyśleć! Dzięki szóstemu komentarzowi do powyższego linku za wskazanie tego.

użytkownik1010892
źródło
5

X-UA-Compatiblezastąpi tylko tryb dokumentu, a nie tryb przeglądarki i nie będzie działał dla wszystkich witryn intranetowych; w takim przypadku najlepszym rozwiązaniem jest wyłączenie opcji „Wyświetl witryny intranetowe w widoku zgodności” i ustawienie zasad grupy, aby określić, które witryny intranetowe wymagają trybu zgodności.

Tony
źródło
5

Dodałem następujące do mojego pliku htaccess, co załatwiło sprawę:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
Metzed
źródło
1
działa to, gdy intranet jest ustawiony na zgodność. dużo czasu zajęło mi znalezienie czegoś, co zadziała. szczególnie, gdy wyszukujesz i wszystko jest powiązane z iis
shorif2000 18.09.13
To jest niesamowite. Nie wiedziałem, że możesz wysyłać nagłówki z rozszerzeniem .htaccess
Alex W
3

Dodatkowo, X-UA-Compatible musi być pierwszym metatagiem w sekcji head

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

Nawiasem mówiąc, poprawna kolejność lub główne tagi główne to:

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

Tą drogą

  1. ustawiamy silnik renderowania do użycia, zanim IExplorer rozpocznie przetwarzanie
  2. dokument, a następnie ustawiamy kodowanie do użycia we wszystkich przeglądarkach
  3. następnie wypisujemy tytuł, który będzie przetwarzany z już zdefiniowanym kodowaniem.
Leonardo Molina
źródło
2
W rzeczywistości CHARSET powinien poprzedzać X-UA-Compatible. Zobacz blogs.msdn.com/b/ieinternals/archive/2011/07/18/…
EricLaw
1
Nie musi być pierwszy, ale musi znajdować się blisko szczytu. Może podążać za tytułem (i charset, jak zauważył Eric), ale o to chodzi.
Lance Leonard
w moim przypadku na nginx zadziała tylko wtedy, gdy tag X-UA-Compatible jest pierwszy w sekcji head
Marco Roth
2

Timmy Franks miał to dla mnie odpowiednie. Właśnie mieliśmy dzisiaj problem, w którym klient miał IE8 w całej firmie, i zmuszał witrynę, którą napisaliśmy dla ich intranetu, do trybu zgodności. Ustawienie „IE-Edge” wydawało się to naprawić.

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=Edge" />
  </customHeaders>
</httpProtocol>
SouthShoreAK
źródło
1

IE 11 nie pozwala już zastąpić ustawienia widoku zgodności przeglądarki, wysyłając nagłówek ...

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

Wydaje się, że jedynym sposobem zmuszenia przeglądarki do nieużywania widoku zgodności jest wyłączenie go przez użytkownika w przeglądarce. Nasza jest witryną intranetową, a domyślną opcją IE jest użycie widoku zgodności dla witryn intranetowych. Co za ból!

Udało nam się zapobiec potrzebie zmiany ustawień przeglądarki dla użytkowników IE 9 i 10, ale to już nie działa w IE 11. Nasi użytkownicy IE przechodzą na Chrome, gdzie nie jest to problemem i nigdy nie miał być.

EricP
źródło
Nie chodzi o to, że na to nie pozwala, IE11nie obsługuje innych trybów zgodności innych niż edge. Link do oficjalnej dokumentacji . Oznacza to, że nie musimy już używać tego metatagu, aby ukryć przycisk CM na pasku adresu.
Wallace Sidhrée
4
Nieprawda: IE11 nadal obsługuje wszystkie starsze tryby zgodności.
EricLaw
@EricLaw, czy odpowiedź EricP jest poprawna (że IE11 zmienia zachowanie nagłówka HTTP zgodnego z X-UA)?
Matthew Flaschen
@EricP, czy wypróbowałeś nagłówek HTTP, czy tylko wersję znacznika <meta>?
Matthew Flaschen
2
@MatthewFlaschen: Nie, EricP jest niepoprawny, podobnie jak Wallace Sidhree (chociaż, aby być uczciwym wobec Wallace'a, MSDN nie wyjaśnia, co rozumieją przez „przestarzałe”). W IE11 zmieniono to, że w ogóle nie ma widocznego przycisku „Widok zgodności” ( technet.microsoft.com/en-us/library/dn321449.aspx ), ale deklaracje zgodne z X-UA są nadal przestrzegane.
EricLaw
1

Byłem w stanie obejść to ładowanie nagłówków przed HTML za pomocą php i działało to bardzo dobrze.

<?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 to treść, którą chciałem załadować po wysłaniu nagłówków.

użytkownik3071843
źródło
1

Ten sam problem występował w IE11. Żadna z tych odpowiedzi nie rozwiązała mojego problemu. Po nieco kopaniu zauważyłem, że przeglądarka działa w trybie Enterprise . (sprawdź, naciskając klawisz F12 i klikając kartę emulacji, poszukaj menu rozwijanego profilu przeglądarki) Ustawienie zostało zablokowane, nie pozwalając mi na zmianę tego ustawienia.

Po usunięciu CurrentVersion z następującego klucza rejestru mogłem zmienić profil na Pulpit :

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

Po zmianie trybu na Pulpit odpowiedzi w tym poście będą działać.

jfatal
źródło
1

Gdy przeglądarka zostanie otwarta z trybami zgodności, nawet po usunięciu i wyłączeniu konfiguracji wszystkich trybów zgodności z przeglądarki internetowej i Edytora lokalnych zasad grupy, możesz spróbować wyłączyć klucz rejestru.

Zdarzyło mi się to również przy korzystaniu z domeny i subdomeny do połączenia ze stroną serwera. Maszyna jest ograniczona do otwierania w trybie zgodności dla wszystkich subdomen.

WYŁĄCZ TRYB KOMPATYBILNOŚCI DLA INTRANETU

HKEY_LOCAL_MACHINE - OPROGRAMOWANIE - Zasady - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode Wartość powinna wynosić 0 (zero) . A także usuń istniejącą nazwę domeny z PolicyList.

W przeciwnym razie możesz dodać nową wartość (DWORD), która zawiera dane o wartości 0 (zero) .

ayciceksamet
źródło
0

Miałem ten sam problem po wypróbowaniu wielu kombinacji. Miałem tę notatkę roboczą. Sprawdziłem kompatybilność dla intranetu 

<!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">
capadleman
źródło
0

Jeśli używasz stosu LAMP, dodaj go do pliku .htaccess w folderze głównym sieci. Nie trzeba dodawać go do każdego pliku PHP.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
Kevin Smith
źródło