Como recordatorio - los navegadores estándar disponen de margin
, padding
y border
definen el width
, mientras IEs (Quirks) viene
definido por una anchura libre.
Esta linea es de 300px de ancho
#box {
width: 300px;
padding: 20px;
}
En nuestra caja de muestra vemos muy claro - el texto que figura en el cuadro de 300px de ancho y 20px de padding para mantener los espacios en los bordes. El cuadro general es de anchura total de 340px y, por lo tanto, mucho más amplio que la línea de control. En IE, sin embargo, todo el cuadro es tan ancho como la línea de control.
¿Cómo lograr una representación igual en los demás navegadores?
Dependiendo de la representación que se está llevando a cabo, existen varias posibilidades. Si queremos impedir que la caja se apmlíe, es necesario no ceder el ancho del cuadro al relleno, pero só que figura en el elemento hijo (en este caso P).
Esta linea es de 300px de ancho
#box {
width: 300px;
}
#box p {
padding: 20px;
}
En caso de que el texto sea exactamente de 300px de ancho , necesitamos indicar explícitamente de qué manera se amplía la caja (en nuestro ejemplo 340px). Con este fin, añadimos los estilos en una declaración redundante que sólo interpreta IEs.
Esta linea es de 300px de ancho
#box {
width: 300px;
padding: 20px;
}
/* start html hack for IE */
* html #box {
width: 340px;
}