Nos contaba hace un par de días
Blanca Salvatierra en un artículo la existencia de una página web que instaba a los usuarios del navegador Internet Explorer 6 a actualizarse o cambiar de navegador.
Realmente es un dolor tener que desarrollar páginas web que se vean bien en todos los navegadores. Aunque la mayoría de los diseñadores y programadores ya se saben los "trucos" para conseguirlo, no deja de ser una gran pérdida de tiempo y esfuerzo.
A día de hoy, los lectores de
Público.es utilizan cinco navegadores principalmente (porcentajes aproximados): Internet Explorer 7 (~ 30 % de los usuarios) , Internte Explorer 6 (~ 30%), Mozilla Firefox (~ 30%), Apple Safari (~ 2%) y Opera (~1%).
De estos cinco navegadores, el Internet Explorer 6 (abreviado como IE6) es el menos compatible, para que una página que se ve bien en el resto se vea en IE6 muchas veces hay que recurrir a trucos y "chapucillas".
¿Cómo puede ser ésto? Las páginas web actualmente se basan (principalmente) en tres "lenguajes" con funciones diferenciadas, todos ellos estandarizados por organizaciones de internacionales:
HTML,
CSS y
JavaScript.
El lenguaje HTML es el que contiene el texto o contenido significativo de una página web, el CSS se encarga de formatear y dar estilo a este texto. Finalmente, con JavaScript podemos hacer que el usuario interaccione con una página web de diferentes formas.
El problema es que en teoría todos los navegadores soportan estos tres lenguajes, pero en la práctica, cada uno lo hace a su manera, y de todos ellos, el IE6 es el que más extraño se comporta.
Supongamos que tenemos el siguiente fragmento de HTML (simplificado):
Prueba con HTML
Título del documento
Listado de palabras
- Palabra 1
- Palabra 2
- Palabra 3
- Palabra 4
- Palabra 5
Esto es un párrafo de texto, párrafo de texto,
párrafo de texto,párrafo de texto, párrafo de texto,
párrafo de texto, párrafo de texto.
Esto es otro párrafo de texto, párrafo de texto,
párrafo de texto, párrafo de texto, párrafo de texto,
párrafo de texto, párrafo de texto.
Esto es un texto en el pie de la página.
Este documento se vería así en los distintos navegadores (pulsar para ampliar):
No hemos especificado ningún estilo, así que los navegadores formatean el texto como les parece, aunque el resultado es muy parecido en todos los casos.
Ahora establecemos que este HTML utilice el siguiente CSS que lo formateará. Este CSS es bastante ingenuo, ya que no tiene en cuenta las peculiaridades de los distintos navegadores. Lo que pretende es establecer una página centrada, con una cabecera gris, un cuerpo azul con dos columnas, verde y amarilla y un pie de página rojo:
#contenedor {
border: solid 1px black;
padding: 10px;
width: 750px;
margin: 0 auto;
}
#cabecera {
background-color: gray;
width: 730px;
}
#cuerpo {
background-color: blue;
width: 730px;
}
#pie {
background-color: red;
width: 730px;
}
#colizda {
width: 180px;
background-color: green;
float: left;
padding: 10px;
}
#coldcha {
width: 510px;
background-color: yellow;
float: left;
padding: 10px;
}Las diferencias entre navegadores son notorias:
 |
Mozilla Firefox |
 |
Opera |
 |
Safari |
 |
Explorer 7 |
 |
Explorer 6 |
Hacemos algunos ajustes adicionales conseguimos al fin que en todos se vea igual:
body {
/* Para centrar en IE6 */
text-align: center;
}
p, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#contenedor {
margin: 0 auto;
width: 770px;
}
#contenido {
border: solid 1px black;
padding: 10px;
width: 750px;
/* Para expandir la capa hacia abajo en
Safari, Opera y Firefox */
float: left;
/* Para compensar el apaño de IE6 en body */
text-align: left;
}
#cabecera {
background-color: gray;
float: left;
width: 750px;
}
#cuerpo {
background-color: blue;
float: left;
width: 750px;
}
#pie {
background-color: red;
float: left;
width: 750px;
}Y éste es el resultado:
 |
Mozilla Firefox |
 |
Opera |
 |
Safari |
 |
Explorer 7 |
 |
Explorer 6 |
Lo más chocante es que para que en IE6 se vea la página centrada tenemos que establecer una propiedad ilógica: que el texto en la etiqueta "body" esté centrado (text-align: center;)
Por otra parte, los dos Internet Explorer expanden y muestran la capa contenedora de las columnas (fondo azul), mientras que en los demás hay que hacerla visible explícitamente.
En general el comportamiento de IE7, Firefox, Opera y Safari es muy similar, los problemas siempre los suele dar el IE6.
Se comprende entonces que los diseñadores de páginas web estén hartos del Explorer 6 y su peculiar forma de interpretar los estándares.
Créditos: gracias a
Daniel Solana Tacón, diseñador web de Público por ayudarme con estos CSS.
