Ah! Nosso querido IE, sempre nos causando dor de cabeça!
Como todo desenvolvedor Web já sabe, tudo no IE para não funcionar corretamente, ou do jeito que gostaríamos, testamos nossa aplicação em vários navegadores e todos ficam do jeito que desejamos, mas quando abrimos no IE, muitas vezes está uma verdadeira bagunça.
Existem diversos hacks para solucionar vários problemas, ou carregar um CSS diferente para cada versão do IE.
Mas o problema muitas vezes pode ser resolvido simplesmente setando a versão correta do IE.
Com tantos problemas de compatibilidade que o IE apresenta, muitos recursos apenas funcionam em versões antigas ou somente nas versões mais recentes, para solucionar isso foi criado a meta tag X-UA-Compatible, que consiste em obrigar o IE a carregar a página como se fosse uma versão especifica.
Por exemplo, para carregar o IE em modo compatível com IE 8, deve se usar a seguinte meta tag...
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Isso fará o IE carregar como se fosse o IE 8. Também podemos setar outras versões como por exemplo, content="IE=7", content="IE=8", content="IE=9" e por aí vai.
Como esse recurso de compatibilidade está disponível no próprio IE, muitas vezes nosso IE não está configurado para exibir as páginas na sua versão mais recente, por exemplo, temos o IE 10 instalado, mas ele está em modo de compatibilidade como IE 8, e não sabemos disso, para essas situações, podemos obrigar o IE a sempre carregar como se fosse a versão mais recente, para isso usamos o IE=Edge, conforme exemplo...
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Lembrando que para o IE aceitar esse modo de compatibilidade deve-se declarar essa meta tag na primeira parte da tag <head>, antes de qualquer outra meta tag.
Apenas com isso já resolve muitas vezes os problemas de quebra de layout e outros recursos que antes não funcionavam, pois o IE não estava se comportando como se fosse a versão mais recente.
