Como ya sabemos todos no todas las versiones de los navegadores tienen los mismos parámetros de referencia para trabajar con algunas de las propiedades y valores de las hojas de estilo. Todos nos hemos “roto” la cabeza más de mil veces con las propiedades de CSS en distintos navegadores y con su comportamiento en cada uno de ellos. En especial nuestro amigo Internet Explorer 6.

El caso más común de todos es el famoso modelo de cajas. Debido a que los “cajas” o DIVs es lo que más usamos a la hora de maquetar en distintos navegadores.

Aclarando el problema…

Recordad que los problemas comienzan cuado trabajamos con diseños estáticos. Nuestra caja tendrá un ancho dado, pero no todos los navegadores interpretarán ese ancho de la misma manera. Según el W3C el ancho de una caja se mide desde el límite interno del relleno izquierdo (left-padding) hasta el límite interno del relleno derecho (right-padding).

En caso de no existir relleno se toman los límites internos izquierdo y derecho del borde (border-right y border-left). Cuando Microsoft lanzó su Internet Explorer 5 para Windows (IE5/win) no respetó éste estándar, interpretando la propiedad width como el ancho comprendido entre los límites exteriores del borde (border-left y border-right).

Para verlo con más claridad supongamos un ejemplo sencillo: una caja de 100 pixeles de ancho, 10 de relleno, 5 de borde y 10 de márgen, todos ellos uniformes.

El elemento DIV

Aquí el contenido de la caja

Aplicando CSS

div {
width: 100px;
padding: 10px;
border: 5px solid #000;
margin: 10px;
}

En la imagen siguiente (en la que se ha aplicado un color al padding únicamente con fin ilustrativo) puede verse una representación de la diferente interpretación entre el IE5/IE6 y los demás navegadores y anticipar las perjudiciales consecuencias para el diseño final.

Solución

La solución y especificación del modelo de caja la proporcionamos en una página externa para mejor visualización, el enlace es el siguiente:

Modelo de Caja (Box Model hack)