Box Model en Internet Explorer

Imagina que has creado el mejor diseño de tu vida. Obviamente tiene dimensiones precisas. Lo programas y lo revisas en Firefox y todo anda perfecto, sin embargo tu mamá lo ve en su computador y el diseño luce horrible. ¿Qué ha pasado? Es Internet Explorer nuevamente echándote a perder la vida.

Para ser exactos las versiones 5.x y 6 en Quirks Mode de Internet Explorer se apartan de los estándares W3C al renderizar en pantalla los elementos de bloque que tienen un ancho o alto fijo. (Para el ejemplo esta puede ser sólo una de las causas posibles, pero es la más común).

El Problema

Digamos que tenemos la siguiente declaración:

.boxModel{
  width:200px;
  padding:10px;
  border:5px;
  margin:10px;
}

Navegadores apegados a los estándares (e incluso IE 6 en Standar Mode) utilizan la siguiente fórmula para calcular las dimensiones del elemento:

Ancho Total = width + padding + border + margin.= 250px.
Ancho del Contenido = width = 200px


 

Sin embargo IE ocupa la siguiente fórmula:

Ancho Total IE=  widht + margin = 220 px.
Ancho del Contenido =  width – padding – border = 170px


 

La solución

Para solucionar esto, debemos crear una nueva declaración, un parche ubicado después de la declaración original en nuestra hoja de estilos, el que para el ejemplo, sería así:

* HTML .boxModel{
  width:230px;
  w\idth:200px;
}

El selector * HTML .boxModel es visto sólo por IE 5.0 hacia arriba (incluído 6). Los ingenieros de Microsoft crearon para su navegador un elemento (representado por el asterisco *) que contiene al elemento HTML , elemento que no existe en el estandar de la W3C por lo que navegadores como Firefox u Opera no lo reconocen, pero sí IE.

Ahora, para contrarrestar la mala interpretación e IE 5.x, la propiedad width de nuestro parche toma el valor de la siguiente fórmula:

Ancho para parche = width + padding + border

Sin embargo, como este código es visto también por IE 6 (el cual en Standard Mode interpreta bien el box model), debemos hacer que éste reciba un ancho de 200px, por eso se agrega w\idth:200px. ¿Más magia? El backslash entre la w y la i, hace que esta propiedad sea visible sólo por IE 6, con lo que damos el valor correcto del ancho al elemento.

Ancho para parche (w\idth) = width

Hay que hacer notar que todo lo que se ha mostrado para el ancho del elemento es válido también para el alto, aunque generalmente los diseñadores prefieren que sea el contenido el que determine el alto en sus diseños.