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 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 describe cómo ciertos elementos de una página web son mostrados por un navegador gráfico. El modelo de caja permite a los elementos de nivel bloque (block-level elements), como un párrafo o bloque entrecomillados, ser envueltos por un relleno (padding), bordes y/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. IE versión 5 incorrectamente incluye las medidas de relleno y bordes dentro de la anchura especificada, resultando en un modelo mucho más angosto 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 diseño de esquema (layout engine) del navegador escondiendo reglas. El más conocido de estos trucos es el "box model hack" desarrollado por Tantek Çelik. El truco de Çelik, desarrollado 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 el Internet Explorer para Windows que luego sea eliminada por otra. Esta segunda especificación queda oculta al explotar un fallo en la manera en la que el navegador analiza reglas CSS.

IE 6 no está afectado por este fallo si la página contiene una DTD HTML válida. Esta versión va dentro del modo "quirks" y mantiene el comportamiento del fallo cuando la DTD está ausente o incompleta por razones de retrocompatibilidad. Éste también usa el modo quirks si hay 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.