Modelo de caja: Box model
El modelo de caja: Si tenemos este CSS y HTML:
#box {
width: 100px;
border: 5px;
padding: 20px;
}
<div id="box">...</div>
La anchura total de la caja será 150px (100px + 5px*2 + 20px*2) en todos los navegadores excepto en versiones anteriores a IE 6, donde será 100px incluyendo dentro paddings y bordes.
Soluciones:
1.-Box Model Hack:
#box {
width: 150px;
voice-family: "\"}\"";
voice-family: inherit;
width: 100px;
}
2.- Hack del selector universal para IE
#box {
width: 100px; /* todos los navegadores lo leen */
border: 5px;
padding: 20px;
}
* html #box {
width: 150px; /* solo IE lo lee */
}
#box {
width:100px;
_width:150px;
border: 5px;
padding: 20px;
}
#box {
width: 150px
}
#box div {
border: 5px;
padding: 20px;
}
<div id="box"><div>...</div></div>
5.- SitePoint
padding: 20px;
border: 5px;
width: 150px
width/**/:/**/ 100px;
6.- Modo estricto
Si usamos el tipo de documento en modo estricto, IE interpreta correctamente la caja.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Relacionado:
Alternate Box Model Hacks Test: Más soluciones alternativas.
3dboxmodel : // hicksdesign
Interactive CSS Box Model Demo
Garbage In, Garbage Out - CSS !important
ervdesign » El dichoso modelo de caja
ervdesign » El dichoso modelo de caja II
Sindica el feed
Opciones de discusión
Hay 3 Comentarios
O solución aún mas fácil de recordar:
div { /* todos leen */ }* html div { /* solo IE lee */ }
:)
interesante, el ejemplo que pones es bastante sencillo.
Muy buen tip
[…]
Qué: Modelo de caja: Box model Dónde: Juglar
[…]
Deja un comentario