Modelo de cajas en CSS (3)

IE5.x interpreta la propiedad width como la suma del ancho del contenido mas el padding mas el borde de un bloque. ¿Cómo afecta esto el diseño con CSS? Supongamos que tenemos la siguiente especificación:

#caja {
  width:100px;
  padding:20px;
  border:10px;}

Sería interpretado de esta manera-->

Versiones más recientes de IE (6.0 y mayores) implementan el modelo correctamente, siempre y cuando los documentos contengan un doctype valido.

El Parche

¿Qué hacer al respecto? Por un lado Internet Explorer es el navegador más utilizado, pero por otro, si estructuramos mal la página no solo estamos dejando de lado a los usuarios de otros navegadores, sino también de posibles futuras versiones de Internet Explorer.

Afortunadamente la comunidad de desarrolladores ha encontrado maneras de aprovechar otros errores que tiene Explorer en la interpretación de las hojas de estilo para esconder algunos atributos y mostrar otros. El primero en hacer esto fue Tantek Celik, que desarrolló lo que ahora se conoce como box model hack. Por ejemplo, para corregir el caso anterior

#caja { 
  width:130px; 
  voice-family: ""}""; 
  voice-family:inherit;
  width:100px;
} 
        

Usando el caracter , "confundimos" a IE5.x y este ignora la ultima declaración de width, mientras que los demás navegadores toman la ultima declaración, que es la correcta según los estándares. De esta manera la caja se despliega de la misma manera en cualquier navegador.

Hay infinidad de parches o hacks para corregir el modelo de cajas de IE, personalmente el que uso es:

#caja{
	width:  100px;  /*1-para opera*/
	width: 130px; /*2-para ie-se agrega el padding y border*/
	width: 100px; /*3- estandares*/
} 

Autor: Kemie , antigua colaboradora de WebTaller.com

Usuarios que han visto este tema también han visto...

- Bordes Punteados con CSS
- Capas flotantes en CSS
- Primeros pasos con CSS
- Maquetar con CSS usando X columnas
- Estilo de la primera letra con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento