CSS ¿el ancho incluye el relleno?

Parece que en IE, el ancho incluye el tamaño de relleno. mientras que en FF, el ancho no. ¿Cómo puedo hacer que ambos se comporten igual?

Gracias.

  • IE solía usar el modelo de caja “border-box” más conveniente pero no estándar. En este modelo, el ancho de un elemento incluye el relleno y los bordes. Por ejemplo:
    #foo { width: 10em; padding: 2em; border: 1em; }
    sería 10em ancho.

  • Por el contrario, todos los navegadores que temen a las normas adoptan de forma predeterminada el modelo de cuadro “ cuadro de contenido” . En este modelo, el ancho de un elemento no incluye relleno o bordes. Por ejemplo:
    #foo { width: 10em; padding: 2em; border: 1em; }
    en realidad tendrá 16em ancho: 10em + 2em relleno para cada lado, + 1em borde para cada borde.

Si utiliza una versión moderna de IE con marcado válido , un buen tipo de documento y encabezados adecuados , se adherirá al estándar. De lo contrario, puede obligar a los navegadores modernos que cumplen con los estándares a usar “border-box” a través de:

 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

La primera statement es necesaria para Opera, la segunda es para Firefox, la tercera es para Webkit y Chrome.

Aquí hay una prueba simple que hice hace años para probar qué statement de tamaño de caja admite su navegador: http://phrogz.net/CSS/boxsizing.html

Tenga en cuenta que Webkit (Safari y Chrome) no es compatible con el modelo de cuadro de padding-box través de cualquier statement.

Una regla simple es tratar de evitar el uso de las propiedades de relleno / margen y ancho para el mismo elemento. es decir, usar algo similar a esto

 
........... ...........

Me topé con esta pregunta y, aunque tiene un par de años, pensé que podría agregar esto en caso de que alguien se topa con este hilo.

CSS3 ahora tiene una propiedad de tamaño de caja. Si establece, por ejemplo,

 .bigbox { box-sizing: border-box; width: 1000px; border: 5px solid #333; padding: 10px; } 

tu clase tendrá 1000 px de ancho, en vez de 1030 px. Esto es, por supuesto, increíblemente útil para cualquiera que use bordes del tamaño de un píxel con divisiones líquidas, porque resuelve un problema que de otro modo sería insoluble.

Mejor aún, el tamaño de la caja es compatible con todos los principales navegadores, excepto con IE7 y versiones posteriores. Para incluir todos los elementos dentro de la dimensión de ancho o alto, establezca el tamaño del cuadro en el cuadro de borde. Para agregar otros elementos al ancho y / o alto, que es el valor predeterminado, puede establecer el tamaño del cuadro en “cuadro de contenido”.

No estoy seguro del estado actual de la syntax del navegador, pero aún incluyo los prefijos -moz y -webkit:

 .bigbox{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

¿Tiene un doctype declarado? Cuando comencé a codificar html tuve este problema, y ​​fue por no haber declarado un doctype. Mi favorito es:

   ...  

para aquellos que aún tendrían el problema, jQuery proporcionó dos propiedades outerWidth () e innerWitdh () para conocer el ancho de un objeto con o sin bordes …