Internet Explorer box model bug
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 su posterior versión 7 exentas de dicho error en sus modos estándar pero aún remanente en el modo de retrocompatibilidad (Quirks Mode). 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.