Cuando diseñamos nuestra página y la probamos en otro navegador, lo normal es que no funcione correctamente ¿Por qué? simplemente porque cada uno de ellos interpreta las instrucciones de diferente manera.
Hasta ahora, debíamos chequear las cosas con Firefox e Internet Explorer pero, la salida de IE7 nos obliga a revisar un poco más ya que ha modificado algunas etiquetas para que se adapten a las reglas de la W3C pero no todas.
Con la ayuda de los artículos de mclibre.org aquí se trata de explicar algunas de esas diferencias.
Hasta ahora, debíamos chequear las cosas con Firefox e Internet Explorer pero, la salida de IE7 nos obliga a revisar un poco más ya que ha modificado algunas etiquetas para que se adapten a las reglas de la W3C pero no todas.
Con la ayuda de los artículos de mclibre.org aquí se trata de explicar algunas de esas diferencias.
ETIQUETAS
El contenido de la etiqueta <q>; (cita rápida) debería mostrarse entre comillas, Firefox sigue la recomendación, pero Internet Explorer no. Si las añadimos a mano, algunos navegadores mostrarán comillas simples y otros, comillas dobles.
Cuando la etiqueta <abbr>; tiene el atributo title, Firefox muestra un subrayado fino. Internet Explorer no.
IMAGENES
Si una imagen no tiene atributo title, Internet Explorer muestra el atributo alt en forma de tip. Firefox no lo hace, solamente muestra un tip cuando la imagen tiene establecido el atributo title.
Firefox e Internet Explorer 7 muestran el padding en las imágenes, pero Internet Explorer 6 no.
IE6 no mostraba correctamente las imágenes en formato PNG con transparencia alfa. IE7 sí que lo hace. Firefox también.
PSEUDO-CLASES Y PSEUDO-ELEMENTOS
La pseudo-clase :first-child funciona en Firefox e IE7, pero no en IE6 (hace referencia al primer elemento de un tipo contenido dentro de otro).
La pseudo-clase :hover funciona en IE7, pero únicamente funcionaba en IE 6 cuando se aplicaba a enlaces. En Firefox funciona correctamente.
BORDES
Si un elemento tiene un borde a trazos, la zona sin trazo (dashed) se ve del color de fondo del elemento en Firefox o del elemento padre en Internet Explorer.
Firefox, IE7 e IE6 interpretan de manera distinta los bordes en las etiquetas <html> y <body>. Para ver las diferencias, se puede abrir la siguiente página de ejemplo de bordes y comparar los resultados.
IE7 muestra tanto el borde de <html> como el de <body>. Si el contenido es grande y se añaden barras de desplazamiento, los bordes inferiores no se ven hasta que uno se desplaza al final de la página.
IE6 muestra ambos bordes de la misma manera, así que si se definen ambos sólo se muestra el borde de <body> pegado a la ventana, independientemente del contenido. Además, interpreta el margin como el padding y muestra un relleno igual a la suma del margen y del relleno.
POSICIONAMIENTO
El posicionamiento fijo position: fixed funciona en Firefox e IE7 pero no en IE6. Para ver las diferencias, se puede abrir la página de ejemplo de posicionamiento fijo y comparar los resultados.
IE no aplica correctamente el posicionamiento fijo a una tabla. Coloca la leyenda (caption) en el lugar correcto, pero no las celdas de la tabla. Si la tabla está metida en una división y el posicionamiento lo tiene la división, Internet Explorer ya lo hace bien. Firefox lo hace bien.
El posicionamiento absoluto position: absolute funciona en IE7, pero no funciona correctamente en IE6. IE6 descuenta el border y el padding del tamaño del elemento, cuando la recomendación dice que el border y el padding se añaden al tamaño del elemento.
La W3C establece que el relleno (padding), el borde (border) y el margen (margin) se añaden al tamaño definido para el elemento (por ejemplo, con las propiedades width y height). Internet Explorer 6 incluye el borde (border) y el relleno (padding) dentro del elemento, en vez de añadirlo. La página de ejemplo de tamaño de elemento muestra varias divisiones con el mismo tamaño, pero con diferentes rellenos, bordes y márgenes.
LISTAS
Al colocar una listas no ordenada (UL) sin texto dentro de otra lista no ordenada (UL) Firefox muestra dos marcadores a la misma altura. Internet Explorer sólo muestra el marcador de la lista interior.
Los fondos de las listas (background-color) se ven de forma distinta en Firefox y en Internet Explorer.
TABLAS
Firefox calcula el ancho de las celdas a partir de su contenido, pero Internet Explorer tiene también en cuenta la leyenda. Si la leyenda es una cadena (sin espacios) más larga que el ancho que correspondería a la tabla por su contenido, la tabla se ensancha. Si hay espacios, entonces el ancho de la tabla se calcula en función del contenido de las celdas y la leyenda ocupa varias líneas, como hace siempre Firefox.
Internet Explorer aplica el atributo cellpadding a la leyenda, mientras que Firefox no.
Cuando una celda está vacía, Internet Explorer no muestra el borde de la celdas. Firefox sí.
Internet Explorer no aplica la propiedad empty-cells. Firefox sí que la aplica.
Cuando una tabla ocupa varias páginas en la vista preliminar (menú Archivo > Vista preliminar), Firefox muestra e imprime las filas de <thead> y <tfoot> en cada página de la vista preliminar, mientras que Internet Explorer 7 sólo muestra las filas de <thead> al principio de la tabla y las filas de <tfoot> al final de la tabla.
Las propiedades margin-left: auto y margin-right: auto para centrar una tabla y su leyenda funcionan en IE7, pero no en IE6.
Para centrar una tabla en IE6 hay que insertar la tabla en una división y centrar el contenido de la división. De esta manera IE6 centra la tabla, pero no su contenido de la tabla. En IE7 funciona igual pero no en Firefox, que no centra la tabla pero sí el contenido.
Internet Explorer 6 entetiende las propiedades margin-left y margin-right con valores auto si la página no contiene esta primera línea XHTML:
El contenido de la etiqueta <q>; (cita rápida) debería mostrarse entre comillas, Firefox sigue la recomendación, pero Internet Explorer no. Si las añadimos a mano, algunos navegadores mostrarán comillas simples y otros, comillas dobles.
Cuando la etiqueta <abbr>; tiene el atributo title, Firefox muestra un subrayado fino. Internet Explorer no.
IMAGENES
Si una imagen no tiene atributo title, Internet Explorer muestra el atributo alt en forma de tip. Firefox no lo hace, solamente muestra un tip cuando la imagen tiene establecido el atributo title.
Firefox e Internet Explorer 7 muestran el padding en las imágenes, pero Internet Explorer 6 no.
IE6 no mostraba correctamente las imágenes en formato PNG con transparencia alfa. IE7 sí que lo hace. Firefox también.
PSEUDO-CLASES Y PSEUDO-ELEMENTOS
La pseudo-clase :first-child funciona en Firefox e IE7, pero no en IE6 (hace referencia al primer elemento de un tipo contenido dentro de otro).
La pseudo-clase :hover funciona en IE7, pero únicamente funcionaba en IE 6 cuando se aplicaba a enlaces. En Firefox funciona correctamente.
BORDES
Si un elemento tiene un borde a trazos, la zona sin trazo (dashed) se ve del color de fondo del elemento en Firefox o del elemento padre en Internet Explorer.
Firefox, IE7 e IE6 interpretan de manera distinta los bordes en las etiquetas <html> y <body>. Para ver las diferencias, se puede abrir la siguiente página de ejemplo de bordes y comparar los resultados.
IE7 muestra tanto el borde de <html> como el de <body>. Si el contenido es grande y se añaden barras de desplazamiento, los bordes inferiores no se ven hasta que uno se desplaza al final de la página.
IE6 muestra ambos bordes de la misma manera, así que si se definen ambos sólo se muestra el borde de <body> pegado a la ventana, independientemente del contenido. Además, interpreta el margin como el padding y muestra un relleno igual a la suma del margen y del relleno.
POSICIONAMIENTO
El posicionamiento fijo position: fixed funciona en Firefox e IE7 pero no en IE6. Para ver las diferencias, se puede abrir la página de ejemplo de posicionamiento fijo y comparar los resultados.
IE no aplica correctamente el posicionamiento fijo a una tabla. Coloca la leyenda (caption) en el lugar correcto, pero no las celdas de la tabla. Si la tabla está metida en una división y el posicionamiento lo tiene la división, Internet Explorer ya lo hace bien. Firefox lo hace bien.
El posicionamiento absoluto position: absolute funciona en IE7, pero no funciona correctamente en IE6. IE6 descuenta el border y el padding del tamaño del elemento, cuando la recomendación dice que el border y el padding se añaden al tamaño del elemento.
La W3C establece que el relleno (padding), el borde (border) y el margen (margin) se añaden al tamaño definido para el elemento (por ejemplo, con las propiedades width y height). Internet Explorer 6 incluye el borde (border) y el relleno (padding) dentro del elemento, en vez de añadirlo. La página de ejemplo de tamaño de elemento muestra varias divisiones con el mismo tamaño, pero con diferentes rellenos, bordes y márgenes.
LISTAS
Al colocar una listas no ordenada (UL) sin texto dentro de otra lista no ordenada (UL) Firefox muestra dos marcadores a la misma altura. Internet Explorer sólo muestra el marcador de la lista interior.
Los fondos de las listas (background-color) se ven de forma distinta en Firefox y en Internet Explorer.
TABLAS
Firefox calcula el ancho de las celdas a partir de su contenido, pero Internet Explorer tiene también en cuenta la leyenda. Si la leyenda es una cadena (sin espacios) más larga que el ancho que correspondería a la tabla por su contenido, la tabla se ensancha. Si hay espacios, entonces el ancho de la tabla se calcula en función del contenido de las celdas y la leyenda ocupa varias líneas, como hace siempre Firefox.
Internet Explorer aplica el atributo cellpadding a la leyenda, mientras que Firefox no.
Cuando una celda está vacía, Internet Explorer no muestra el borde de la celdas. Firefox sí.
Internet Explorer no aplica la propiedad empty-cells. Firefox sí que la aplica.
Cuando una tabla ocupa varias páginas en la vista preliminar (menú Archivo > Vista preliminar), Firefox muestra e imprime las filas de <thead> y <tfoot> en cada página de la vista preliminar, mientras que Internet Explorer 7 sólo muestra las filas de <thead> al principio de la tabla y las filas de <tfoot> al final de la tabla.
Las propiedades margin-left: auto y margin-right: auto para centrar una tabla y su leyenda funcionan en IE7, pero no en IE6.
Para centrar una tabla en IE6 hay que insertar la tabla en una división y centrar el contenido de la división. De esta manera IE6 centra la tabla, pero no su contenido de la tabla. En IE7 funciona igual pero no en Firefox, que no centra la tabla pero sí el contenido.
Internet Explorer 6 entetiende las propiedades margin-left y margin-right con valores auto si la página no contiene esta primera línea XHTML:
<?xml version="1.0" encoding="iso-8859-1"?>
12 comentarios:
Muy buen artículo. Soy partidario de no tener en cuenta a IE6 y centrarse en IE7 , Firefox y Opera 9. Tal vez, utilizando etiquetas div, span y css en lugar de las etiquetas que se comportan diferente entre los navegadores, soluciona los problemas.
Personalmente a IE7 lo tuve que quitar y volver al IE6, hizo un desastre con la configuración del teclado y terminé teniendo que escribir en esperanto hasta que pude restaurar el sistema, no preguntes por qué: ni idea, "delicias de la vida cibernética".
Lo que decís es cierto pero terminás por volverte loco porque hay que agregar propiedades en lugares insólitos. Fundamentalmente tendrían que utilizar el mismo criterio para padding, margin y border, si hicieran eso, les regalo el resto :)
Para IE7 podes agregarle un '*' (asterisco) antes de la propiedad css, la cual solo se aplicará a este navegador. Lo he tenido que usar a veces, parece un mamarracho hacerlo, pero no me ha quedado otra. Precisamente para el margin me ha servido.
Sobre lo que te paso del IE7, ya ni me extraña :D
Buen dato, lo probaré a ver si queda más prolijo que con los condicionales.
Yo como el resto de los demás mortales del mundo web, lo hago para ie7,ie6 y firefox... y compruebo a veces como se ve en safari, opera , konqueror y demás... pero con estos a menos que se vea muy muy mal no rectifico nada. Todo es en función de las estadísticas del sitio..15-20% firefox, 15-20% ie7 y 60% ie6 y bajando...
"Cuando la etiqueta abbr; tiene el atributo title, Firefox muestra un subrayado fino. Internet Explorer no."
No solo eso, sino que IE6 directamente no reconoce el abbr. Si en la hoja de estilos le aplicas, por ejemplo, un "float:left" a todos los abbr, en Firefox flotan, pero en IE se quedan donde están.
Esa es una de las razones por las que en diseños complejos uno termina usando solamente "divs" y "spans" en vez de la rica y variada cantidad de etiquetas específicas para cada cosa que existen.
IE6 sucks; IE7 sucks un poco menos, pero sucks de todas formas.
Si, en la práctica, esos tres son suficientes, de cualquier manera, parece casi imposible lograr que un 100% de compatibilidad.
delFuego, estoy de acuerdo contigo, cada vez nos limitamos más, imagino que que debe haber decenas de diferencias más, sutiles y no tanto.
Muy bueno el artículo.
Cai en el pq tengo una página muy muy sencilla que en ie6 se ve muy bien, pero que en el IE7 me lo recorta. Si, me recorta 3/4 de la tabla. Es para pegarse un tiro, pq en el código fuente, extrayendolo directamente desde el IE7, aparece todo..... en fin, está comprobado, el problema es MS, no nosotros.
Si, no te quepas duda, el problema son ellos :)
IE7 es un intento tardío e incompleto de acercarse a los estándares lo cual, ha aumentado la confusión ya que ahora tenemos más diferencias que antes.
les recomiendo usar / que es ignorado por firefox y no por el ie
por ejemplo:
margin: 200px (lo interpreta FF)
/margin: 250px (lo interpreta IE7,y 6 creo)
Espero al q no lo sepa le sirva tanto como a mi!!! saludos
se ha dado cuenta que esta web le ha copiado palabra por palabra y no esta penalizada por google (http://validoc.wordpress.com/2008/10/29/firefox-ie6-ie7-todos-distintos/) llegúe a esta web buscando solucionar un problema con las celdas en ie7 y tu página y la otra me aparecieron como respuestas.
un saludo
No, no me había dado cuenta pero, es usual :D
Lo que ahora veo es que http://validoc.wordpress.com ya no existe: "This blog has been archived or suspended for a violation of our Terms of Service."
Probablemente era uno de esos sitios que usan los feeds para copiar contenido.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...