X-UA-Compatible está definido como IE = edge, mas ainda não para o Modo de Compatibilidade

247

Estou bastante confuso. Eu deveria poder definir

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

e IE8 e IE9 devem renderizar a página usando o mecanismo de renderização mais recente. No entanto, acabei de testá-lo e, se o Modo de compatibilidade estiver ativado em outro lugar do site, ele permanecerá ativo em nossa página , mesmo que devamos forçá-lo a não fazê-lo.

Como você deve garantir que o IE não use o Modo de Compatibilidade (mesmo em uma intranet)?

FWIW, estou usando a declaração HTML5 DocType ( <!doctype html>).

Aqui estão as primeiras linhas da página:

<!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: Acabei de saber que a configuração padrão no IE8 é usar o modo de compatibilidade do IE7 para sites da intranet. Isso substituiria a metatag compatível com X-UA?

internet-explorer ie8-compatibility-mode x-ua-compatible Kerrick
fonte

Também estou tendo esse problema com alguns dos meus usuários, você já descobriu isso? Meu aplicativo não é intranet. E apenas 20% dos usuários conseguem, estranhamente.

21711 Kevin

2

Isso pode ser o resultado da sua marcação engraçada da tag <html> (o material <! - [if lt IE 7]>). Tente removê-lo e veja se funciona. Veja esta questão SO stackoverflow.com/questions/10682827/…

Sunday Ironfoot

13

@SundayIronfoot FYI, a marcação engraçada da tag <html> a que você se refere é comentários condicionais do IE que são usados para adicionar uma classe CSS ao elemento <html> para a versão apropriada do IE (se aplicável), para que você possa estilizar as coisas de maneira diferente conforme necessário para as versões do IE, basta prefixar sua declaração de estilo com ".ie7", como: .ie7 p {width: 200px; } ... é uma solução mais limpa para solucionar problemas em versões mais antigas do IE do que ter que usar alguns dos hacks CSS, como * width ou _width. Navegadores que não sejam o IE irão ignorá-lo e usarão apenas o básico.

Tim Franklin

261

Se você precisar substituir as configurações de exibição de compatibilidade do IE para sites da intranet, faça isso no web.config (IIS7) ou nos cabeçalhos HTTP personalizados nas propriedades do site (IIS6) e defina X-UA-Compatible lá. A metatag não substitui a configuração da intranet do IE em Configurações de exibição de compatibilidade, mas se você a configurar no servidor de hospedagem, a compatibilidade será substituída.

Exemplo para web.config no IIS7:

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

Edit : Eu removi o clearcódigo imediatamente antes do add; foi uma supervisão desnecessária de copiar e colar. Boa captura, comentaristas!

Tim Franklin
fonte

5

Apenas uma observação ... Se você estiver desenvolvendo usando o servidor da Web de desenvolvimento Visual Studio (também conhecido como Cassini), isso não funcionará porque o Cassini não respeita a seção <system.webServer> da web. config. Portanto, para desenvolvimento, use o IIS Express.

18712 James Messinger

1

Qual o motivo disso <clear />? Quais cabeçalhos personalizados são limpos por isso?

M4N

O claro parece remover a <urlCompression...>regra pelo menos para mim. Essa regra faz gzipping, o que eu quero, então comentei claramente. Qualquer informação adicional seria adorável.

Nenotlep

Eu removi o 'clear' - boa captura, era uma linha desnecessária de copiar e colar da minha implementação.

Tim Franklin

14

PHP:<?php header('X-UA-Compatible: IE=edge'); ?>

Nux 11/04/2013

183

A solução do lado do servidor é a recomendada, como o @TimmyFranks propôs em sua resposta, mas se for necessário implementar a X-UA-Compatibleregra no nível da página, leia as dicas a seguir, para aproveitar a experiência de quem já se queimou

A X-UA-Compatiblemetatag deve aparecer logo após o título no <head>elemento. Nenhuma outra metatag, links css e chamadas js scripts podem ser colocadas antes dele.

<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 houver algum comentário condicional na página (digamos localizado na <html>), eles deverão ser colocados em, após o <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]-->

A equipe do Html5BoilerPlate escreveu sobre esse bug - http://h5bp.com/i/378 Eles têm várias soluções.

Em relação à exibição Intranet e compatibilidade, há configurações quando você acessa Ferramentas> Configurações da exibição Compatibilidade.

Configurações de exibição de compatibilidade

neoswf
fonte

1

Eu tentei 4 ou 5 outras respostas no Stack Overflow, e somente essa combinação específica funcionou para mim. Para quem usa o WordPress e um plug-in SEO, tenha cuidado com o plug-in que reescreve o <title> em outro local. Edit: Added WordPress comment

Mike Ebert

6

X-UA-Compatibledeve aparecer o mais cedo possível, provavelmente depoischarset . Eu não acho que é verdade que "deve aparecer logo após o título".

sam

Esta recomendação é resultado de um sofrimento no IE. Foi ganho por sangue. Quem disse que o IE segue as diretrizes?

Neoswf #

4

Uau, isso funcionou para mim e ter minhas meta tags logo após a tag title foi o que fez o truque. Gostaria que não fosse tão arcaica para fazer este trabalho ...

theJerm

A X-UA-Compatiblemeta tag pode aparecer depois title, basee quaisquer outros meta tags sem perder seu efeito. Isto é o que eu testei no IE8. Porém, nenhum comentário condicional pode ser colocado antes dele.

Rockallite 14/03

37

Observe que, se você estiver servindo a partir do PHP, também poderá usar o código a seguir para corrigi-lo.

header("X-UA-Compatible: IE=Edge");

TJ L
fonte

4

Isso funciona melhor do que adicionar a metatag, pois ela passa na validação do W3C usando esse método e é muito mais fácil que um hack .htaccess.

Talvi Watia

2

Eu tentei de tudo, e foi isso que finalmente funcionou. Obrigado.

13122 Jason

2

Para aqueles no WordPress, isso pode ajudar: codex.wordpress.org/Plugin_API/Action_Reference/send_headers

ambiguousmouse

Isso funciona muito melhor também quando um site enorme é construído, dependendo <!--[if lt IE 7 ]> <html>...! OBRIGADO! Você é Deus enviado !!

OZZIE

2

@sunskin - Qualquer cabeçalho enviado pelo PHP DEVE acontecer antes de enviar qualquer saída para a página, ou seja, antes de qualquer HTML ou dados serem produzidos pelo PHP.

TJ L

25

Como se vê, isso tem a ver com a opção "inteligente" da Microsoft para fazer com que todos os sites da intranet sejam forçados ao modo de compatibilidade, mesmo que X-UA-Compatibleesteja definido como IE=edge.

Kerrick
fonte

32

Isso não é verdade. O X-UA-Compatible substituirá a configuração do modo de compatibilidade. No entanto, às vezes o uso da metatag não funciona porque o modo já foi definido no momento em que o encontra. É por isso que eu uso a versão do cabeçalho HTML, para que o navegador possa ativar o modo de padrões no início do processo.

Erik Funkenbusch

3

Adicionando ao comentário do Mystere Man, você pode substituí-lo no servidor de hospedagem usando o web.config ou os cabeçalhos HTTP personalizados no IIS. Veja meu post acima para obter detalhes.

Tim Franklin

7

Eu tentei isso várias vezes e ele não substitui todos os sites da intranet forçados ao modo de comparabilidade.

Maess

@Mystere Man: defina algumas vezes como sempre que a página estiver em um iframe, onde o documento pai não define XUA-COMPAT, e o modo de documento seja herdado da página pai (outra opção muito inteligente do MS).

Stefan Steiger

1

@ Kerrick: Esta não é a resposta correta. Veja o abaixo desta resposta por tj111 para a resposta correta.

degenerada

9

Também obtive o mesmo problema da renderização do IE9 nos padrões de documentos do IE7 para host local. Tentei muitas tags de comentários condicionais, mas sem êxito. No final, eu apenas removi todas as tags condicionais e adicionei a meta tag imediatamente após a cabeça, como abaixo, e funcionou como um encanto.

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

Espero que ajude

Pramod
fonte

7

Mesmo se você desmarcou a opção "Exibir sites da intranet no modo de exibição de compatibilidade" e tem o X-UA-Compatible em seus cabeçalhos de resposta, há outro motivo pelo qual seu navegador pode ter como padrão o "Modo de exibição de compatibilidade" de qualquer maneira - sua Política de Grupo. Veja no seu console a seguinte mensagem:

HTML1203: xxx.xxx foi configurado para ser executado no Modo de Exibição de Compatibilidade através da Diretiva de Grupo.

Onde xxx.xxx é o domínio do seu site (por exemplo, test.com). Se você vir isso, a política de grupo do seu domínio será definida para que qualquer site que termine em test.com seja renderizado automaticamente no modo de compatibilidade, independentemente do tipo de documento, cabeçalhos etc.

Para obter mais informações, consulte o seguinte link (explica os códigos html): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

rshadman
fonte

5

Como o NEOSWF aponta acima, os comentários condicionais de Paul Irish impedem que a metatag tenha qualquer efeito.

Existem várias correções aqui ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Esses incluem:

Adicionando duas classes HTML, usando cabeçalhos de servidor e adicionando um comentário condicional acima do doctype.

No meu projeto mais recente, decidi remover os comentários condicionais de Paul Irish. Eu não gostei da idéia de adicionar nada antes do html sem fazer muitos testes primeiro e é bom ver o que foi definido apenas olhando o HTML.

No final, envolvi uma div logo após o corpo e usei comentários condicionais, por exemplo

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

Eu poderia ter feito isso em todo o corpo, mas é mais difícil com CMSs como o Wordpress.

Obviamente, é outro DIV dentro da marcação, mas é apenas para navegadores mais antigos.

Eu acho que poderia ser uma decisão por projeto com base.

Também li algo sobre a metatag charset que precisa aparecer nos primeiros 1024 bytes, para garantir isso.

Às vezes, as idéias mais simples e fáceis de ler são as melhores e definitivamente vale a pena pensar! Obrigado ao sexto comentário no link acima por apontar isso.

user1010892
fonte

5

X-UA-Compatiblesubstituirá apenas o Modo Documento, não o Modo Navegador, e não funcionará em todos os sites da intranet; se esse for o seu caso, a melhor solução é desabilitar "Exibir sites da intranet no Modo de Exibição Compatível" e definir uma configuração de diretiva de grupo para especificar quais sites da intranet precisam do modo de compatibilidade.

Tony
fonte

5

Adicionei o seguinte ao meu arquivo htaccess, que fez o truque:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie

Metzed
fonte

1

isso funciona quando a intranet está configurada para compatibilidade. Levei muito tempo para encontrar algo que funcionasse. especialmente quando você pesquisa e tudo é IIS relacionadas

shorif2000

Isso é incrível. Eu não sabia que você poderia enviar cabeçalhos com .htaccess

Alex W

3

Além disso, X-UA-Compatible deve ser a primeira metatag na seção head

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

A propósito, a ordem correta ou as principais tags de cabeçalho são:

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

Deste jeito

configuramos o mecanismo de renderização para uso antes do IExplorer começar a processar
o documento, em seguida, definimos a codificação para uso em todos os navegadores
depois imprimimos o título, que será processado com a codificação já definida.

Leonardo Molina
fonte

2

Na verdade, o CHARSET deve preceder o X-UA-Compatible. Veja blogs.msdn.com/b/ieinternals/archive/2011/07/18/…

EricLaw

1

Não precisa ser o primeiro, mas precisa estar perto do topo. Pode seguir o título (e charset, como Eric observou), mas é isso.

Lance Leonard

no meu caso no nginx, só funcionará se a tag X-UA-Compatible for a primeira na seção head

Marco Roth

2

Timmy Franks acertou em mim. Hoje tivemos o problema de hoje em que o cliente tinha o IE8 em toda a empresa e estava forçando o site que escrevemos para a intranet para o modo de compatibilidade. Definir "IE-Edge" pareceu corrigi-lo.

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

SouthShoreAK
fonte

2

Para Nginx,

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

ref: https://github.com/h5bp/server-configs/commit/a5b0a8f736d68f7de27cdcb202e32975a74bd2c5

z2z
fonte

1

O IE 11 não permite que você substitua mais a configuração de exibição de compatibilidade do navegador enviando o cabeçalho ...

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

Parece que a única maneira de forçar o navegador a não usar a exibição de compatibilidade é fazer com que o usuário o desative no navegador. O nosso é um site da Intranet, e a opção padrão do IE é usar a exibição de compatibilidade para sites da Intranet. Que dor!

Conseguimos impedir a necessidade de o usuário alterar as configurações do navegador para usuários do IE 9 e 10, mas ele não funciona mais no IE 11. Nossos usuários do IE estão migrando para o Chrome, onde isso não é um problema e nunca ocorreu. fui.

EricP
fonte

Não é que ele não permita, IE11não suporta outros modos de compatibilidade que não sejam edge. Link para a documentação oficial . Isso significa que não precisamos mais usar essa metatag para ocultar o botão CM na barra de endereço.

Wallace Sidhrée

4

Falso: O IE11 ainda suporta todos os modos de compatibilidade herdados.

21814 EricLaw #

@ Ericric, a resposta do EricP está correta (que o IE11 altera o comportamento do cabeçalho HTTP compatível com X-UA)?

Matthew Flaschen

@EricP, você tentou o cabeçalho HTTP ou apenas a versão da tag <meta>?

Matthew Flaschen

2

@MatthewFlaschen: Não, EricP está incorreto, assim como Wallace Sidhree (apesar de ser justo com Wallace, o MSDN não explica o que eles querem dizer com "obsoleto"). O que mudou no IE11 é que não há nenhum botão "Compatibility View" visível ( technet.microsoft.com/en-us/library/dn321449.aspx ), mas as declarações compatíveis com X-UA ainda são respeitadas.

precisa saber é o seguinte

1

Eu era capaz de contornar isso carregando os cabeçalhos antes do HTML com php, e funcionou muito bem.

<?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 é o conteúdo que eu queria carregar depois de enviar os cabeçalhos.

user3071843
fonte

1

Eu estava enfrentando o mesmo problema no IE11. Nenhuma dessas respostas resolveu meu problema. Depois de cavar um pouco, notei que o navegador estava sendo executado no modo Enterprise . (verifique pressionando F12 e clique na guia emulação, procure o menu suspenso do perfil do navegador). A configuração estava bloqueada, não me permitindo alterar a configuração.

Consegui alterar o perfil para a área de trabalho após excluir o CurrentVersion da seguinte chave do Registro:

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

Depois de alterar o modo para a área de trabalho, as respostas nesta postagem funcionarão.

jfatal
fonte

1

Quando o navegador é aberto com os Modos de compatibilidade, mesmo que você remova e desative todas as configurações dos modos de compactação do navegador da Web e do Editor de Diretiva de Grupo Local, tente desativar a chave de registro.

Isso também aconteceu comigo ao usar o domínio e o subdomínio para conectar-se ao lado do servidor. A máquina está restrita a abrir no modo de compabilidade para todos os subdomínios.

DESATIVAR O MODO DE COMPABILIDADE PARA INTRANET

HKEY_LOCAL_MACHINE - SOFTWARE - Diretivas - Microsoft - Internet Explorer - Emulação do navegador -> O valor IntranetCompalityMode deve ser 0 (zero) . E também remova o nome de domínio existente do PolicyList.

Caso contrário, você pode adicionar um novo valor (DWORD) que contenha 0 (zero) dados de valor.

ayciceksamet
fonte

0

Eu tive o mesmo problema depois de tentar várias combinações. Esta nota de trabalho foi verificada quanto à compatibilidade na 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 você estiver usando a pilha LAMP, adicione-a ao seu arquivo .htaccess na pasta raiz da web. Não há necessidade de adicioná-lo a todos os arquivos PHP.

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

Kevin Smith
fonte

X-UA-Compatible está definido como IE = edge, mas ainda não para o Modo de Compatibilidade

Respostas: