Básicamente, la “caja” en CSS puede ser asimilada a una tabla con una sola celda.
De forma obviamente rectangular, esa caja puede tener bordes (border), márgenes transparentes por fuera de los bordes (margin) y relleno transparente por dentro de los bordes (padding). Cualquiera de estos atributos puede ser asignado para cada uno de los cuatro lados de la caja separadamente.
El contenido de la caja se ubicará dentro del área de relleno.
En general, podemos hablar de dos tipos de diseño:
Cuando Microsoft lanzó su Internet Explorer 5 para Windows (IE5/win) no respetó éste estándar, interpretando la propiedad width como el ancho comprendido entre los límites exteriores del borde (border-left y border-right).
Para verlo con más claridad supongamos un ejemplo sencillo: una caja de 100 pixeles de ancho, 10 de relleno, 5 de borde y 10 de márgen, todos ellos uniformes.
El elemento <div>
<body>
<div>Aquí el contenido de la caja</div>
</body>
Aplicando CSS ...
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
En la imagen siguiente (en la que se ha aplicado un color al padding únicamente con fin ilustrativo) puede verse una representación de la diferente interpretación entre el IE5/win y los demás navegadores y anticipar las desastrosas consecuencias para el diseño final.
Tal como se aprecia, la caja se ve más pequeña cuando se la visualiza con IE5/win.
La versión del navegador para Mac (IE5/mac) no tiene ese inconveniente e interpreta la caja según el estándar W3C.
Afortunadamente, Microsoft remedió este problema en el Explorer 6, pero hay millones de usuarios que todavía utilizan IE5.x/win!
borde izquierdo + relleno izquierdo + contenido + relleno derecho + borde derecho
5 px + 10 px + 100 px + 10 px + 5 px
o sea …
width: 130 px;
De este modo, la caja se vería idéntica en todos los navegadores.
El problema con muchas de las soluciones (hacks) propuestas es que de un modo u otro terminaban afectando a otros navegadores menos populares. Por lo tanto, aún cuando la cosa mejoraba sustancialmente en términos de audiencia, faltaba dar todavía con un recurso que no generara efectos indeseados.
Volviendo a nuestro ejemplo:
<body>
<div>Aquí el contenido de la caja</div>
</body>
y aplicando CSS con algunos cambios ...
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
/* Aquí está el truco, el Tan Hack */
* html div {
width: 130px;
width: 100px;
}
Para cualquier navegador distinto del Explorer la regla será interpretada como errónea y por lo tanto ignorada, ya que no existe ningún elemento que contenga a html, que acabamos de decir que es el elemento raíz.
El Explorer (en todas las versiones) parece creer en la existencia de un misterioso elemento que engloba a html (obviamente se trata de un defecto de estos navegadores), por lo que la regla le resultará válida.
Hasta aquí logramos que únicamente los IE resulten afectados y redefinan el ancho a 130px. Solo resta lograr que esa redefinición del ancho (en el ejemplo a 130px) sea válida únicamente para el IE5.x/win, ya que habíamos dicho que tanto el IE5/mac como el IE6 interpretaban correctamente el modelo de caja y no necesitan ningún truco para respetar nuestro diseño.
Para eso utilizamos la siguiente línea, de apariencia un poco extraña:
width: 100px;
Tanto el IE5/mac como el IE6 son capaces de ignorar la barra invertida (escape) dentro del nombre de una propiedad, siempre que se cumplan determinadas condiciones que detallamos más adelante.
Los dos navegadores “corregirán” width transformándolo en width y volverán a modificar el ancho a 100px, su valor correcto.
El IE5.x/win no puede manejar esa barra invertida dentro del nombre y por lo tanto considera a esa línea como errónea y la ignora. El resultado es que el ancho, para IE5.x/win y sólo para él, permanece en 130px.
Es exactamente lo que queríamos!
Un último comentario acerca de la barra invertida dentro del nombre: hay ciertas limitaciones en cuanto a su posición.
Compartir en redes sociales
3 comentarios revisados:| Por: Arturo | 06/9/2006
|
2) No es cierto que IE6 interprete bien el modelo de caja. Depende de la DTD que se utilice. Esto sí que merece un artículo.
3) Mala cosa que un sitio tan bueno como el vuestro recomiende hacks CSS. Sobre todo cuando <em>el problema se soluciona la mayoría de las veces añadiendo un div contenedor, sin border ni padding pero con width</em>. Por cierto, ¿os habéis asegurado de que este hack vaya a funcionar en IE7?... está a punto de salir, y como actualización de seguridad.
 Lancro | Esta totalmente desfasado xD | 05/11/2010 |
rverdej... | Sobre Internet Explorer | 03/8/2011 |
Usuarios: 
22 de agosto de 2006
Valoración del artículo:
