Uma das estatísticas mais bizarras sobre os navegadores é que as versões do Internet Explorer 6, 7 e 8 coexistem. Até este artigo, as versões do Internet Explorer representam aproximadamente 65% da participação de mercado no total. Na comunidade de desenvolvimento de sites, esse número é muito menor e as estatísticas mostram que são apenas cerca de 40%.
A parte mais interessante dessas estatísticas é que os valores entre IE6, IE7 e IE8 são muito próximos, o que impede que um único navegador da Microsoft domine o oposto do passado. De acordo com essas estatísticas lamentáveis, é necessário que os desenvolvedores realizem testes abrangentes de todos os navegadores do IE atualmente usados ao desenvolver sites para clientes, e isso também atrairá mais usuários em projetos pessoais.
Graças a essas bibliotecas JavaScript (estruturas), os testes JavaScript de navegador cruzado são o mais próximo possível da situação atual. Mas esse não é o caso no desenvolvimento do CSS, especialmente as três versões atualmente no IE.
Este artigo tenta fornecer uma referência detalhada e fácil de usar para diferentes desenvolvedores que desejam entender o apoio do CSS para IE6, IE7 e IE8. Esta referência contém uma visão geral e compatibilidade das seguintes situações:
A. Um dos três navegadores suporta entradas, mas os outros dois não.
B. Dois dos três navegadores suportam a entrada, mas a outra não a suporta.
Este artigo não discutirá:
A. entradas que não são suportadas pelos três navegadores
B. Atributos privados
Portanto, o foco deste artigo está na diferença entre os três navegadores, em vez das falhas de suporte necessárias. A lista está dividida nas cinco partes a seguir:
1. Seletor e herança
2. Pseudo-classes e pseudo-elementos
3. Suporte de atributo
4. Outras tecnologias
5. Bugs importantes e problemas de incompatibilidade
1. Seletor e herança
A. subseltor
Exemplo
| corpo> p { Cor: #ffff; } |
descrever
O seletor de crianças seleciona todos os elementos diretos de um elemento pai específico.
Apoiar
| Ie6 não Ie7 sim Ie8 sim |
Bugs
No IE7, se houver um comentário HTML entre a tag pai e a tag infantil, o seletor de crianças não funcionará.
B. Chain
Exemplo
| .class1.class2.class3 { Antecedentes: #ffff; } |
descrever
A classe Chain é usada para enviar um elemento HTML com várias declarações de classe, como esta:
| <div class = "classe1 classe2 classe3"> <p> Conteúdo aqui. </p> </div> |
Apoiar
| Ie6 não Ie7 sim Ie8 sim |
Bugs
O IE6 parece suportar essa situação porque pode corresponder à última classe na cadeia com o elemento que usa a classe, no entanto, não limita um elemento que usa todas as classes na cadeia.
C. seletor de atributos
Exemplo
| a [href] { Cor: #0f0; } |
descrever
Esse seletor permite que um elemento seja posicionado desde que tenha propriedades especificadas. No exemplo acima, todas as tags com o atributo href serão limitadas, enquanto uma tags sem o atributo href não será limitada.
Apoiar
| Ie6 não Ie7 sim Ie8 sim |
D. seletor de irmão se aproximando
Exemplo
| H1+P { Cor: #f00; } |
descrever
Este seletor localiza as tags de irmãos próximas ao elemento especificado. O exemplo acima limitará a tag P, mas deve ser o irmão da tag H1 e deve seguir diretamente atrás da tag H1. por exemplo:
| <h1> cabeçalho </h1> <p> Conteúdo aqui. </p> <p> Conteúdo aqui. </p> |
No código acima, o estilo CSS funcionará apenas para o primeiro p. Porque é o irmão de H1 e segue H1 imediatamente. O segundo P também é um irmão de H1, mas não segue H1 imediatamente.
Apoiar
| Ie6 não Ie7 sim Ie8 sim |
Bugs
No IE7, se houver um comentário HTML entre os irmãos, o seletor de irmãos adjacentes será inválido.
E. Seletor de irmão comum
Exemplo
| H1 ~ P { Cor: #f00; } |
descrever
Este seletor localiza todos os elementos irmãos seguindo um elemento especificado. A aplicação deste seletor no exemplo acima funcionará para ambas as tags P. Obviamente, se um elemento P aparecer antes do H1, esse elemento P não será correspondido.
Apoiar
| Ie6 não Ie7 sim Ie8 sim |