Uno de los tantos problemas que tiene el Internet Explorer es que no respeta los estándares web, y nosotros cuando creamos una página web que se ve bien en Firefox y respetando los estándares y luego la probamos en Internet Explorer nos llevamos muchas descepciones, y no nos queda de otra que adaptarnos a todos los navegadores, no podemos dejar fuera a los usuarios que utilicen malos navegadores, no hay que discriminar, para ello existen varios «hacks».
El problema que vamos a solucionar ahora es el que tiene Internet Explorer en sus versiones inferiores a la 6, principalmente Internet Explorer 5, según el estándar el ancho de una caja se mide desde el limite interior del relleno izquierdo (padding-left) hasta el limite interior del relleno derecho (padding-right) pero el Internet Explorer 5 lo mide desde el limite exterior izquierdo (padding-left) hasta el limite exterior derecho (padding-right), para solucionar el problema existen varios hacks, el que más me gusta es el hack propuesto por Edwardson Tan, el cual consiste en crear una regla específica para ese navegador utilizando algunos errores, aquí un ejemplo:
Tenemos una caja en DIV con el siguiente código HTML
<body>
<div>Aquí el contenido de la caja</div>
</body>El códgo CSS con el hack ya aplicado debe ser así:
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
/* Este es el Tan Hack */
* html div {
width: 130px; /* funciona en Internet Explorer 6 y 5 para mac*/
w\\idth: 100px; /* funciona unicamente en Internet Explorer 5.x para Windows */
}En cristalab lo explican más a fondo. Aquí hay más alternativas para el Box model hack.