X-UA-Compatible è impostato su IE = edge, ma non si ferma ancora la modalità di compatibilità

247

Sono abbastanza confuso. Dovrei essere in grado di impostare

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

e IE8 e IE9 dovrebbero eseguire il rendering della pagina utilizzando l'ultimo motore di rendering. Tuttavia, l'ho appena testato e se la Modalità compatibilità è attivata altrove sul nostro sito, rimarrà attiva per la nostra pagina , anche se dovremmo costringerla a non farlo.

Come dovresti assicurarti che IE non usi la modalità di compatibilità (anche in una rete intranet)?

FWIW, sto usando la dichiarazione DocType HTML5 ( <!doctype html>).

Ecco le prime righe della pagina:

<!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: Ho appena appreso che l'impostazione predefinita su IE8 è di utilizzare la modalità di compatibilità IE7 per i siti Intranet. Questo avrebbe la precedenza sul meta tag compatibile con X-UA?

internet-explorer  ie8-compatibility-mode  x-ua-compatible 
— Kerrick
fonte
Sto riscontrando questo problema anche con alcuni dei miei utenti, l'hai mai capito? La mia app non è Intranet però. E solo il 20% degli utenti lo capisce, stranamente.
— Kevin,
2
Questo potrebbe essere il risultato del tuo divertente markup tag <html> (le cose <! - [if lt IE 7]>). Prova a rimuoverlo e vedi se funziona. Vedere questo SO domanda stackoverflow.com/questions/10682827/...
— Domenica Piediferro
13
@SundayIronfoot FYI, il divertente markup tag <html> a cui fai riferimento sono i commenti condizionali IE che vengono utilizzati per aggiungere una classe CSS all'elemento <html> per la versione appropriata di IE (se applicabile) in modo da poter modellare le cose in modo diverso secondo necessità per le versioni di IE semplicemente anteponendo la tua dichiarazione di stile con ".ie7", come: .ie7 p {larghezza: 200px; } ... è un modo più pulito di risolvere i problemi di rendering nelle versioni precedenti di IE piuttosto che dover usare alcuni degli hack CSS come * width o _width. Browser diversi da IE lo ignoreranno e useranno solo quello di base.
— Tim Franklin,

Risposte:

261

Se è necessario sovrascrivere le impostazioni di visualizzazione della compatibilità di IE per i siti Intranet, è possibile farlo in web.config (IIS7) o tramite le intestazioni HTTP personalizzate nelle proprietà del sito Web (IIS6) e impostare lì compatibile X-UA. Il metatag non sovrascrive le impostazioni della Intranet di IE nelle impostazioni della Visualizzazione compatibilità, ma se lo si imposta sul server di hosting sostituirà la compatibilità.

Esempio per web.config in IIS7:

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

Modifica : ho rimosso il clearcodice appena prima del add; era una svista inutile da copiare e incollare. Buona cattura, commentatori!

— Tim Franklin
fonte
5
Solo una nota però ... Se stai sviluppando utilizzando il web server di sviluppo di Visual Studio incorporato (aka Cassini), allora questo non funzionerà perché Cassini non rispetta la sezione <system.webServer> del web. config. Quindi, per lo sviluppo, utilizzare invece IIS Express.
— James Messinger,
1
Qual è il motivo per il <clear />? Quali intestazioni personalizzate vengono cancellate da questo?
— M4N,
Il clear sembra rimuovere la <urlCompression...>regola almeno per me. Quella regola fa gzip, cosa che voglio, quindi ho commentato chiaramente. Ogni ulteriore informazione sarebbe adorabile.
— Nenotlep,
Ho rimosso il "chiaro" - buona cattura, era una linea inutile da copiare e incollare dalla mia implementazione.
— Tim Franklin,
14
PHP:<?php header('X-UA-Compatible: IE=edge'); ?>
— Nux,
183

La soluzione Server Side è quella consigliata, come proposto da @TimmyFranks nella sua risposta, ma se è necessario implementare la X-UA-Compatibleregola a livello di pagina, si prega di leggere i seguenti suggerimenti, per beneficiare dell'esperienza di chi è già stato bruciato

Il X-UA-Compatiblemeta tag deve apparire subito dopo il titolo <head>nell'elemento. Nessun altro meta tag, link css e chiamate js script possono essere inseriti prima di esso.

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

Se ci sono commenti condizionali nella pagina (diciamo che si trova nella <html>), devono essere inseriti sotto, dopo il <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]-->

Il team di Html5BoilerPlate ha scritto di questo bug - http://h5bp.com/i/378 Hanno diverse soluzioni.

Per quanto riguarda la vista Intranet e Compatibilità, ci sono impostazioni quando vai su Strumenti> Impostazioni vista Compatibilità.

Impostazioni della vista compatibilità

— neoswf
fonte
1
Ho provato altre 4 o 5 risposte su Stack Overflow e solo questa combinazione specifica ha funzionato per me. Per chiunque utilizzi WordPress e un plug-in SEO, fai attenzione al plug-in che riscrive il <title> in un'altra posizione. Modifica: Aggiunto commento WordPress
— Mike Ebert,
6
X-UA-Compatibledovrebbe apparire il prima possibile, probabilmente dopocharset . Non credo sia vero che "deve apparire subito dopo il titolo".
— sam,
Questa raccomandazione è il risultato della sofferenza sotto IE. Sono stato guadagnato dal sangue. Chi dice che IE segue le linee guida?
— Neoswf,
4
Wow, questo ha funzionato per me e avere i miei meta tag subito dopo il tag del titolo è quello che ha fatto il trucco. Vorrei che non fosse così arcaico far funzionare questo ...
— theJerm
Il X-UA-Compatiblemeta tag può apparire dopo title, basee ogni altra meta tag senza perdere il suo effetto. Questo è ciò che ho testato in IE8. Tuttavia, non è possibile inserire commenti condizionali.
— Rockallite,
37

Nota che se lo stai offrendo da PHP, puoi anche usare il seguente codice per risolverlo.

header("X-UA-Compatible: IE=Edge");
— TJ L
fonte
4
Funziona meglio dell'aggiunta del meta tag, poiché passa la convalida W3C usando questo metodo ed è molto più semplice di un hack .htaccess.
— Talvi Watia,
2
Ho provato tutto il resto, e questo è quello che alla fine ha funzionato. Grazie.
— Jason,
2
Per coloro che su WordPress, questo può aiutare: codex.wordpress.org/Plugin_API/Action_Reference/send_headers
— ambiguousmouse
Funziona molto meglio anche quando viene costruito un sito enorme a seconda <!--[if lt IE 7 ]> <html>...! GRAZIE! Sei Dio mandato !!
— OZZIE,
2
@sunskin - Qualsiasi intestazione inviata da PHP DEVE avvenire prima di inviare qualsiasi output alla pagina, cioè prima che HTML o dati vengano inviati da PHP.
— TJ L
25

A quanto pare, ciò ha a che fare con la scelta "intelligente" di Microsoft di costringere tutti i siti Intranet a forzare la modalità di compatibilità, anche se X-UA-Compatibleè impostato su IE=edge.

— Kerrick
fonte
32
Non è vero. X-UA-Compatible sostituirà l'impostazione della modalità di compatibilità. Tuttavia, a volte l'utilizzo del metatag non funziona perché la modalità è già stata impostata nel momento in cui la incontra. Questo è il motivo per cui utilizzo la versione dell'intestazione HTML, quindi il browser può abilitare la modalità standard all'inizio del processo.
— Erik Funkenbusch,
3
Aggiungendo al commento di Mystere Man, è possibile sovrascriverlo dal server di hosting utilizzando web.config o le intestazioni http personalizzate in IIS. Vedi il mio post sopra per i dettagli.
— Tim Franklin,
7
L'ho provato più volte e non sovrascrive tutti i siti Intranet costretti alla modalità di comparabilità.
— Maess,
@Mystere Man: Definisci a volte come ogni volta che la pagina si trova in un iframe, in cui il documento principale non definisce XUA-COMPAT e la modalità documento viene ereditata dalla pagina principale (un'altra scelta MS molto intelligente).
— Stefan Steiger,
1
@Kerrick: questa non è la risposta corretta. Vedi quella sotto questa risposta da tj111 per la risposta corretta.
— degenerato il
9

Ho anche avuto lo stesso problema del rendering IE9 negli standard del documento IE7 per l'host locale. Ho provato molti tag di commenti condizionali ma non ci sono riuscito. Alla fine ho appena rimosso tutti i tag condizionali e ho appena aggiunto il meta tag immediatamente dopo la testa come sotto e ha funzionato come un fascino.

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

Spero che sia d'aiuto

— Pramod
fonte
7

Anche se hai deselezionato l'opzione "Visualizza siti intranet in Visualizzazione Compatibilità" e hai X-UA-Compatible nelle intestazioni delle risposte, c'è comunque un altro motivo per cui il tuo browser potrebbe essere predefinito in "Visualizzazione Compatibilità": i criteri di gruppo. Guarda la tua console per il seguente messaggio:

HTML1203: xxx.xxx è stato configurato per l'esecuzione in Visualizzazione compatibilità tramite Criteri di gruppo.

Dove xxx.xxx è il dominio del tuo sito (ad esempio test.com). Se vedi questo, i criteri di gruppo per il tuo dominio sono impostati in modo tale che qualsiasi sito che termina in test.com verrà visualizzato automaticamente in modalità Compatibilità indipendentemente da tipo, intestazioni, ecc.

Per ulteriori informazioni, consultare il seguente collegamento (spiega i codici html): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

— rshadman
fonte
5

Come sottolineato da NEOSWF sopra, i commenti condizionali di Paul Irish impediscono che il metatag abbia alcun effetto.

Ci sono diverse correzioni tutte qui ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Questi includono:

Aggiunta di due classi HTML, utilizzo delle intestazioni del server e aggiunta di un commento condizionale sopra il doctype.

Sul mio ultimo progetto ho deciso di rimuovere i commenti condizionali di Paul Irish. Non mi è piaciuta l'idea di aggiungere qualcosa prima dell'html senza aver fatto MOLTI test prima ed è bello vedere cosa è stato impostato guardando l'HTML.

Alla fine ho circondato un div subito dopo il corpo e ho usato commenti condizionali ad es

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

Avrei potuto farlo in tutto il corpo, ma è più difficile con CMS come Wordpress.

Ovviamente è un altro DIV all'interno del markup, ma è solo per i browser più vecchi.

Penso che potrebbe essere una decisione per progetto.

Ho anche letto qualcosa sul meta tag charset che deve venire nei primi 1024 byte, quindi questo lo assicura.

A volte le idee più semplici e facili da leggere sono le migliori e vale sicuramente la pena pensarci! Grazie al sesto commento sul link sopra per averlo sottolineato.

— user1010892
fonte
5

X-UA-Compatiblesovrascriverà solo la Modalità documento, non la Modalità browser, e non funzionerà per tutti i siti Intranet; in tal caso, la soluzione migliore è disabilitare "Visualizza siti intranet in Visualizzazione compatibilità" e impostare un'impostazione dei criteri di gruppo per specificare quali siti Intranet necessitano della modalità compatibilità.

— Tony
fonte
5

Ho aggiunto quanto segue al mio file htaccess, che ha fatto il trucco:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
— Metzed
fonte
1
funziona quando Intranet è impostata sulla compatibilità. mi ci è voluto molto tempo per trovare qualcosa che funzionasse. specialmente quando cerchi e tutto è correlato a
— ii
Questo e spettacolare. Non sapevo che avresti potuto mandare le intestazioni con .htaccess
— Alex W,
3

Inoltre, X-UA-Compatible deve essere il primo meta tag nella sezione head

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

A proposito, l'ordine corretto o i tag head principali sono:

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

Per di qua

  1. impostiamo il motore di rendering da utilizzare prima che IExplorer inizi a elaborare
  2. il documento quindi impostiamo la codifica da utilizzare per tutto il browser
  3. quindi stampiamo il titolo, che verrà elaborato con la codifica già definita.
— Leonardo Molina
fonte
2
In realtà, il CHARSET dovrebbe precedere l'X-UA-compatibile. Vedi blogs.msdn.com/b/ieinternals/archive/2011/07/18/…
— EricLaw
1
Non deve essere il primo, ma deve essere vicino alla cima. Può seguire il titolo (e il set di caratteri, come ha notato Eric), ma questo è tutto.
— Lance Leonard,
nel mio caso su nginx funzionerà solo se il tag X-UA-Compatible è il primo nella sezione head
— Marco Roth,
2

Timmy Franks aveva ragione per me. Abbiamo appena avuto il problema oggi in cui il client aveva IE8 in tutta l'azienda e stava forzando il sito che abbiamo scritto per la loro intranet in modalità compatibilità. L'impostazione di "IE-Edge" sembrava risolverlo.

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

Internet Explorer 11 non ti consente più di ignorare l'impostazione della visualizzazione di compatibilità del browser inviando l'intestazione ...

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

Sembra che l'unico modo per forzare il browser a non utilizzare la visualizzazione di compatibilità sia che l'utente lo disabiliti nel proprio browser. Il nostro è un sito Intranet e l'opzione IE predefinita è utilizzare la visualizzazione di compatibilità per i siti Intranet. Che dolore!

Siamo stati in grado di impedire la necessità per l'utente di modificare le impostazioni del browser per gli utenti di IE 9 e 10, ma non funziona più in IE 11. I nostri utenti di IE stanno passando a Chrome, dove questo non è un problema e non ha mai stato.

— EricP
fonte
Non è che non lo consenta, IE11non supporta altre modalità di compatibilità diverse da edge. Link alla documentazione ufficiale . Ciò significa che non è più necessario utilizzare quel metatag per nascondere il pulsante CM sulla barra degli indirizzi.
— Wallace Sidhrée,
4
Falso: IE11 supporta ancora tutte le modalità di compatibilità legacy.
— EricLaw,
@EricLaw, la risposta di EricP è corretta (che IE11 modifica il comportamento dell'intestazione HTTP compatibile con X-UA)?
— Matthew Flaschen,
@EricP, hai provato l'intestazione HTTP o solo la versione del tag <meta>?
— Matthew Flaschen,
2
@MatthewFlaschen: No, EricP non è corretto, come lo è Wallace Sidhree (anche se per essere onesti con Wallace, MSDN non spiega cosa significano per "deprecato"). Ciò che è cambiato in IE11 è che non esiste alcun pulsante "Visualizzazione Compatibilità" visibile ( technet.microsoft.com/en-us/library/dn321449.aspx ) ma le dichiarazioni compatibili con X-UA sono ancora rispettate.
— EricLaw,
1

Sono stato in grado di aggirare questo caricamento delle intestazioni prima dell'HTML con php, e ha funzionato molto bene.

<?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 è il contenuto che volevo caricare dopo aver inviato le intestazioni.

— user3071843
fonte
1

Stavo riscontrando lo stesso problema in IE11. Nessuna di queste risposte ha risolto il mio problema. Dopo aver scavato un po ', ho notato che il browser era in esecuzione in modalità Enterprise . (verifica premendo F12 e fai clic sulla scheda di emulazione, cerca il menu a discesa del profilo del browser) L'impostazione è stata bloccata, non permettendomi di modificare l'impostazione.

Sono stato in grado di modificare il profilo su Desktop dopo aver eliminato CurrentVersion dalla seguente chiave di registro:

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

Dopo aver modificato la modalità su Desktop, le risposte su questo post funzioneranno.

— jfatal
fonte
1

Quando il browser si apre con le modalità di compatibilità, anche se si rimuove e si disattiva la configurazione di tutte le modalità di compatibilità dal browser Web e dall'Editor criteri di gruppo locali, è possibile provare a disabilitare dalla chiave di registro.

Questo succede anche a me sull'uso del dominio e del sottodominio per connettere il lato server. L'accesso alla macchina è limitato in modalità di compatibilità per tutti i sottodomini.

DISABILITARE LA MODALITÀ COMPABILITÀ PER INTRANET

HKEY_LOCAL_MACHINE - SOFTWARE - Politiche - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode Il valore deve essere 0 (zero) . E rimuovi anche il nome di dominio esistente da PolicyList.

Altrimenti, è possibile aggiungere un nuovo valore (DWORD) che contiene 0 (zero) dati valore.

— ayciceksamet
fonte
0

Ho avuto lo stesso problema dopo aver provato molte combinazioni Ho avuto questa nota di lavoro Ho verificato la compatibilità per 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">
— capadleman
fonte
0

Se si utilizza lo stack LAMP, aggiungerlo nel file .htaccess nella cartella principale del Web. Non è necessario aggiungerlo a tutti i file PHP.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
— Kevin Smith
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.