Lo interesante de estas estadísticas es que los números para IE6, IE7 e IE8 son muy cercanos, lo que impide que un solo navegador de Microsoft domine la escena, lo contrario de lo que ha sido el caso en el pasado. Según estas lamentables estadísticas, es necesario que los desarrolladores prueben minuciosamente todos los navegadores IE utilizados actualmente al desarrollar sitios web para clientes, y esto también puede atraer a más usuarios para proyectos personales.
Gracias a las bibliotecas de JavaScript (marcos), las pruebas de JavaScript entre navegadores son tan perfectas como lo permite la situación actual. Pero este no es el caso en el desarrollo de CSS, especialmente cuando se trata de las tres versiones de IE que existen actualmente.
Este artículo intenta proporcionar una referencia detallada y fácil de usar para diferentes desarrolladores que quieran comprender la compatibilidad de CSS para IE6, IE7 e IE8. Esta referencia contiene una descripción general y compatibilidad para las siguientes situaciones:
A. Elementos que uno de los tres navegadores admite pero los otros dos no
B. Elementos que dos de los tres navegadores admiten pero uno no
Este artículo no trata:
A. Elementos que no son compatibles con los tres navegadores
B. Atributos privados
Por lo tanto, este artículo se centra en las diferencias entre los tres navegadores, más que en las necesarias deficiencias de soporte. La lista se divide en las siguientes cinco secciones:
1. Selectores y herencia
2. Pseudoclases y pseudoelementos.
3. Soporte de atributos
4. Varias otras tecnologías
5. Errores importantes y problemas de incompatibilidad
1. Selectores y herencia
A. Subselector
Ejemplo
| cuerpo > p { color: #fff; } |
describir
El selector secundario selecciona todos los elementos secundarios directos de un elemento principal específico. En el ejemplo anterior, body es el elemento principal y p es el elemento secundario.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
Insectos
En IE7, los selectores secundarios no funcionarán si hay un comentario HTML entre la etiqueta principal y la etiqueta secundaria.
B. tipo de cadena
Ejemplo
| .clase1.clase2.clase3 { fondo: #fff; } |
describir
La clase de cadena se utiliza para enviar un elemento HTML con múltiples declaraciones de clase, como esta:
| <div clase="clase1 clase2 clase3"> <p>Contenido aquí.</p> </div> |
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
Insectos
IE6 parece admitir esta situación, porque puede hacer coincidir la última clase de la cadena con el elemento que usa esa clase; sin embargo, no puede restringir un elemento que usa todas las clases de la cadena.
C. Selector de atributos
Ejemplo
| un[href] { color: #0f0; } |
describir
Este selector permite ubicar un elemento siempre que tenga los atributos especificados. En el ejemplo anterior, todas las etiquetas con atributos href estarán calificadas, mientras que las etiquetas sin atributos href no estarán calificadas.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
D. Selector de hermanos cercanos
Ejemplo
| h1+p { color: #f00; } |
describir
Este selector ubica etiquetas hermanas adyacentes al elemento especificado. El ejemplo anterior calificará la etiqueta p, pero debe ser hermana de la etiqueta h1 y debe seguir directamente a la etiqueta h1. Por ejemplo:
| <h1>rumbo</h1> <p>Contenido aquí.</p> <p>Contenido aquí.</p> |
En el código anterior, el estilo CSS sólo será efectivo para la primera p. Porque es hermano de h1 y sigue a h1. La segunda p también es hermana de h1, pero no sigue a h1 inmediatamente.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |
Insectos
En IE7, los selectores de hermanos adyacentes no tendrán ningún efecto si hay un comentario HTML entre hermanos.
E. Selector de hermanos ordinario
Ejemplo
| h1~p { color: #f00; } |
describir
Este selector ubica todos los elementos hermanos después de un elemento específico. La aplicación de este selector al ejemplo anterior se aplicará a ambas etiquetas p. Por supuesto, si hay un elemento p que aparece antes de h1, ese elemento p no coincidirá.
Estado de soporte
| IE6 Sí IE7 Sí IE8 Sí |