Internet Explorer box model bug

Diferencia en cómo el ancho (width) es interpretado entre los modelos de caja de W3C e Internet Explorer en modo de retrocompatibilidad o Quirks mode.

El fallo en el modelo de caja de Internet Explorer (en inglés: Internet Explorer box model bug) es uno de los más conocidos fallos en una implementación del estándar web CSS. Éste afecta a las versiones del navegador Microsoft Internet Explorer para Microsoft Windows hasta su versión 6, estando esta última y versiones posteriores exentas de dicho error en sus modos de renderizado "estándar", pero aún permanece remanente en el modo de retrocompatibilidad (Quirks). El fallo no afecta a IE para Mac de la plataforma Apple Macintosh.

Fallo (bug)

El modelo de caja CSS de W3C describe el modelo de formato mediante el cual ciertos elementos de una página web son mostrados por un navegador gráfico. El modelo de caja permite a los elementos a nivel de bloque (block-level elements) —como un párrafo p o bloque entrecomillado blockquote— ser envueltos por un relleno (padding), bordes o márgenes. Para la [1] CSS publicada por W3C, cuando un ancho es explícitamente especificado a cualquier elemento block-level éste debería determinar sólo el ancho del contenido dentro de la caja con el relleno, bordes y márgenes agregados después. La versión 5 de IE incorrectamente incluye las medidas de relleno y bordes dentro de la anchura especificada, resultando en un modelo mucho más angosto que el estándar cuando es visualizado.

Resolviendo el problema

Varios trucos se han publicado para forzar a Internet Explorer a mostrar las páginas correctamente. Estos trucos generalmente explotan otros fallos en el motor de renderizado del navegador escondiendo reglas. El más conocido de estos trucos es el "box model hack" desarrollado por Tantek Çelik. El truco de Çelik, descubierto durante su tiempo de trabajo en Microsoft para el producto Internet Explorer para Macintosh (el cual no está afectado) implica el especificar una anchura para Internet Explorer que luego sea eliminada por otra declarada dentro de un CSS. Esta segunda especificación queda oculta al explotar un fallo en la manera en la que el navegador analiza reglas CSS.

IE6 no está afectado por este fallo si la página contiene una DTD HTML válida. Sin embargo, el modo "quirks" incluido dentro de esta y versiones superiores de IE por motivos de retrocompatibilidad, mantiene el comportamiento del fallo cuando la DTD está ausente o incompleta. También aparecerá el fallo si se activa modo quirks mediante una etiqueta de declaración XML antes del DOCTYPE.

Enlaces externos

• Microsoft's description of how Internet Explorer 6 correctly complies with the CSS standard
• Tantek Çelik's description of the "box model hack"
• Getting Internet Explorer to Play Well with CSS - artículo en about.com que muestra varias formas de trabajar con el problema de la caja en IE y otros fallos más.
• Modified Simplified Box Model Hack
• Hack-free CSS for IE - artículo que usa Sentencia condicional para solucionar fallos.