Internet Explorer box model bug
El Internet Explorer box model bug - fallo en el modelo de caja del IE es uno de los mas conocidos fallos en una implementacion CSS. Este 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 como 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 margenes. Para la [1] CSS publicada por W3C, cuando un ancho es específicamente explícitamente por cualquier elemento block-level este debería determinar solo el ancho del contenido dentro de la caja, con el relleno, bordes y margenes agregados depués. IE version 5 incorrectamente incluye el relleno y bordes dentro de la anchura específicada, resultando en un modelo mucho mas angosto cuando es visualizada.
Trabajando en el problema
Varias vueltas se han dato 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 mas 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 contine una DTD HTML válida. Esta versión va dentro del modo "quirks" y mantine el comportamiento del fallo cuando las DTD está ausente o incomnpleta por razones de retrocompatibilidad. Este tembié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 - articulo 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.