A parte interessante dessas estatísticas é que os números do IE6, IE7 e IE8 são muito próximos, o que impede que um único navegador da Microsoft domine o cenário – o oposto do que aconteceu no passado. Com base nessas estatísticas lamentáveis, é necessário que os desenvolvedores testem minuciosamente todos os navegadores IE usados atualmente ao desenvolver sites para clientes, e isso também pode atrair mais usuários para projetos pessoais.
Graças às bibliotecas JavaScript (frameworks), os testes de JavaScript entre navegadores estão tão próximos da perfeição quanto a situação atual permite. Mas este não é o caso no desenvolvimento CSS, especialmente quando se trata das três versões do IE que existem atualmente.
Este artigo tenta fornecer uma referência detalhada e fácil de usar para diferentes desenvolvedores que desejam entender o suporte CSS para IE6, IE7 e IE8. Esta referência contém uma visão geral e compatibilidade para as seguintes situações:
A. Itens que um dos três navegadores suporta, mas os outros dois não
B. Itens que dois dos três navegadores suportam, mas um não
Este artigo não discute:
A. Itens que não são suportados pelos três navegadores
B. Atributos privados
Portanto, este artigo concentra-se nas diferenças entre os três navegadores, e não nas deficiências de suporte necessárias. A lista está dividida nas cinco seções a seguir:
1. Seletores e herança
2. Pseudoclasses e pseudoelementos
3. Suporte de atributos
4. Várias outras tecnologias
5. Bugs importantes e problemas de incompatibilidade
1. Seletores e herança
A. Subseletor
Exemplo
| corpo > p { cor: #fff; } |
descrever
O seletor filho seleciona todos os elementos filhos diretos de um elemento pai específico. No exemplo acima, body é o elemento pai ep é o elemento filho.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
Erros
No IE7, os seletores filhos não funcionarão se houver um comentário HTML entre a tag pai e a tag filho.
B. Tipo de corrente
Exemplo
| .class1.class2.class3 { plano de fundo: #fff; } |
descrever
A classe chain é usada para enviar um elemento HTML com múltiplas declarações de classe, como esta:
| <div class="class1 class2 class3"> <p>Conteúdo aqui.</p> </div> |
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
Erros
O IE6 parece suportar esta situação, porque pode combinar a última classe da cadeia com o elemento que usa essa classe, porém, não pode restringir um elemento usando todas as classes da cadeia.
C. Seletor de atributos
Exemplo
| uma[href] { cor: #0f0; } |
descrever
Este seletor permite que um elemento seja localizado desde que possua os atributos especificados. No exemplo acima, todas as tags com atributos href serão qualificadas, enquanto as tags sem atributos href não serão qualificadas.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
D. Seletor de irmãos próximos
Exemplo
| h1+p{ cor: #f00; } |
descrever
Este seletor localiza tags irmãs adjacentes ao elemento especificado. O exemplo acima qualificará a tag p, mas deve ser irmão da tag h1 e seguir diretamente a tag h1. por exemplo:
| <h1>título</h1> <p>Conteúdo aqui.</p> <p>Conteúdo aqui.</p> |
No código acima, o estilo CSS só terá efeito na primeira p. Porque é irmão de h1 e segue h1. O segundo p também é irmão de h1, mas não segue h1 imediatamente.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
Erros
No IE7, os seletores de irmãos adjacentes não terão efeito se houver um comentário HTML entre irmãos.
E. Seletor de irmãos comum
Exemplo
| h1~p { cor: #f00; } |
descrever
Este seletor localiza todos os elementos irmãos após um elemento especificado. Aplicar este seletor ao exemplo acima será aplicado a ambas as tags p. Claro, se houver um elemento p que apareça antes de h1, esse elemento p não será correspondido.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |