Internet Explorer box model bug
El Internet Explorer box model bug - fallo en el modelo de caja del IE es uno de los más conocidos fallos en una implementación CSS. Éste afecta a las versiones del navegador Microsoft's Internet Explorer para Microsoft Windows hasta la versión 6. Internet Explorer 6 y 7 no están afectados en sus modos estándar, solo en "Quirks Mode." El fallo no afecta a IE para Mac de la plataforma Apple Macintosh.
Fallo (Bug)
El modelo de caja del 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 block-level -como un párrafo o bloque entrecomillados - ser envueltos por un relleno (padding), bordes y márgenes. Para la [1] CSS publicada por W3C, cuando un ancho es específicamente explícitamente por 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 version 5 incorrectamente incluye el relleno y bordes dentro de la anchura especificada, resultando en un modelo mucho más angosto cuando es visualizada.
Resolviendo el problema
Varios trucos se han publicado para forzar a IE a mostrar las páginas correctamente. Estos trucos generalmente explotan otros fallos en Internet Explorer's layout engine escondiendo reglas desde el navegador. 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 IE en Microsoft para Macintosh, el cual no está afectado por este fallo - implica el especificar de una anchura para el Internet Explorer para Windows que entonces sea eliminado por otra especificación de la anchura. Esta segunda especificación está oculta del Internet Explorer para Windows explotando este fallo en la manera en la que el navegador analiza reglas del 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.