Una de las estadísticas más extrañas sobre los navegadores es que las versiones de Internet Explorer 6, 7 y 8 coexisten. A partir de este artículo, las versiones de Internet Explorer representan aproximadamente el 65% de la cuota de mercado en total. En la comunidad de desarrollo del sitio web, este número es mucho más pequeño, y las estadísticas muestran que es solo alrededor del 40%.
La parte más interesante de estas estadísticas es que los valores entre IE6, IE7 e IE8 son muy cercanos, lo que evita que un solo navegador de Microsoft domine lo contrario del pasado. Según estas lamentables estadísticas, es necesario que los desarrolladores realicen pruebas integrales de todos los navegadores de IE utilizados actualmente al desarrollar sitios web para clientes, y esto también atraerá a más usuarios en proyectos personales.
Gracias a esas bibliotecas de JavaScript (Frameworks), las pruebas de JavaScript cruzadas son tan perfectas como la situación actual lo permite. Pero este no es el caso en el desarrollo de CSS, especialmente las tres versiones actualmente en IE.
Este artículo intenta proporcionar una referencia detallada y fácil de usar para diferentes desarrolladores que desean comprender el apoyo de CSS para IE6, IE7 e IE8. Esta referencia contiene una descripción general y la compatibilidad de las siguientes situaciones:
A. Uno de los tres navegadores admite entradas, pero las otras dos no.
B. Dos de los tres navegadores admiten la entrada, pero la otra no la admite.
Este artículo no discutirá:
A. Entradas que no son compatibles con los tres navegadores
B. Atributos privados
Por lo tanto, el enfoque de este artículo está en la diferencia entre los tres navegadores, en lugar de los defectos de soporte necesarios. La lista se divide en las siguientes cinco partes:
1. Selector y herencia
2. Pseudo-clases y pseudo-elementos
3. Soporte de atributos
4. Otras tecnologías
5. INFRESOS IMPORTANTES Y PROBLEMAS DE INCOMPATICIÓN
1. Selector y herencia
A. sub-selector
Ejemplo
| cuerpo> p { Color: #ffff; } |
describir
El selector de niños selecciona todos los elementos infantiles directos de un elemento principal específico.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
Insectos
En IE7, si hay un comentario HTML entre la etiqueta principal y la etiqueta infantil, el selector de niños no funcionará.
B. cadena
Ejemplo
| .class1.class2.class3 { Antecedentes: #ffff; } |
describir
La clase de cadena se usa para enviar un elemento HTML con múltiples declaraciones de clase, como esta:
| <div class = "class1 class2 class3"> <p> contenido aquí. </p> </div> |
Apoyo
| IE6 No IE7 Sí IE8 Sí |
Insectos
IE6 parece apoyar esta situación porque puede igualar la última clase de la cadena con el elemento que usa la clase, sin embargo, no limita un elemento que usa todas las clases en la cadena.
C. Selector de atributos
Ejemplo
| A [href] { Color: #0f0; } |
describir
Este selector permite que un elemento se coloque siempre que haya especificado propiedades. En el ejemplo anterior, todas las etiquetas con el atributo HREF serán limitadas, mientras que las etiquetas sin el atributo HREF no serán limitadas.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
D. acercándose al selector del hermano
Ejemplo
| H1+P { Color: #F00; } |
describir
Este selector localiza las etiquetas de hermanos que están cerca del elemento especificado. El ejemplo anterior limitará la etiqueta P, pero debe ser el hermano de la etiqueta H1 y debe seguir directamente detrás de la etiqueta H1. Por ejemplo:
| <h1> encabezado </h1> <p> contenido aquí. </p> <p> contenido aquí. </p> |
En el código anterior, el estilo CSS solo funcionará para la primera P. Porque es el hermano de H1 y sigue H1 de inmediato. La segunda P también es un hermano de H1, pero no sigue a H1 de inmediato.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
Insectos
En IE7, si hay un comentario HTML entre los hermanos, el selector de hermanos adyacente no será válido.
E. Selector de hermano ordinario
Ejemplo
| H1 ~ P { Color: #F00; } |
describir
Este selector localiza todos los elementos hermanos después de un elemento especificado. Aplicar este selector al ejemplo anterior funcionará para ambas etiquetas P. Por supuesto, si aparece un elemento P antes de H1, ese elemento P no se combinará.
Apoyo
| IE6 No IE7 Sí IE8 Sí |