Probablemente necesite activar el modo compatible con los estándares. Sin ver un código, sin embargo, no puedo darle más orientación que eso.
Jeff Hubbard
Respuestas:
307
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 10emancho.
Por el contrario, todos los navegadores temerosos de los estándares adoptan por defecto el modelo de cuadro " caja de contenido" . En este modelo, el ancho de un elemento no incluye relleno ni bordes. Por ejemplo: en #foo { width: 10em; padding: 2em; border: 1em; }
realidad será 16emancho: 10em+ 2emrelleno para cada lado, + 1emborde para cada borde.
Si usa una versión moderna de IE con marcado válido , un buen doctype y encabezados apropiados , se adherirá al estándar. De lo contrario, puede forzar a los navegadores modernos que cumplen con los estándares a usar "border-box" a través de:
+1 por mencionar tanto el cuadro de contenido como los modelos de cuadro de borde. Sin embargo, podría querer profundizar en las diferencias.
BoltClock
1
@BoltClock Gracias por el ímpetu para responder más rigurosamente. Actualizado.
Phrogz
Buena respuesta; He estado tratando de recordar (o encontrar) los nombres de las diferentes opciones durante un par de días ... +1 =)
David dice que reinstale a Monica el
A nadie le importa la ópera.
Michael J. Calkins
3
@whitelettersinblankpapers Vea por qué W3Schools apesta y luego una referencia mucho mejor que lo lleva al estándar W3C . No sigas más enlaces a W3Schools. Además, agregue "MDN" a las consultas de su motor de búsqueda sobre estándares web en el futuro.
Phrogz
27
Una regla simple es tratar de evitar el uso de la propiedad de relleno / margen y ancho para el mismo elemento. es decir, usar algo similar a esto
su clase tendrá 1000px de ancho, en lugar de 1030px. Esto es, por supuesto, increíblemente útil para cualquiera que use un borde del tamaño de un píxel con divisores líquidos, porque resuelve un problema insoluble.
Aún mejor, el tamaño de caja es compatible con todos los principales navegadores, excepto IE7 y versiones inferiores. Para incluir todos los elementos dentro de la dimensión de ancho o alto, establezca el tamaño del cuadro en borde-cuadro. A 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 sintaxis del navegador, pero sigo incluyendo los prefijos -moz y -webkit:
¿Cómo esta respuesta tiene tantos votos positivos cuando es la misma respuesta que la aceptada que se escribió hace 3 años?
dippas
1
¿Tienes un doctype declarado? Cuando comencé a codificar html tuve este problema, y era por no tener un doctype declarado. Mi favorito es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
...
</html>
Para aquellos que aún tendrían el problema, jQuery proporcionó dos propiedades outerWidth ()y innerWitdh ()conocer el ancho de un objeto con o sin bordes ...
Respuestas:
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
10emancho.Por el contrario, todos los navegadores temerosos de los estándares adoptan por defecto el modelo de cuadro " caja de contenido" . En este modelo, el ancho de un elemento no incluye relleno ni bordes. Por ejemplo: en
#foo { width: 10em; padding: 2em; border: 1em; }realidad será
16emancho:10em+2emrelleno para cada lado, +1emborde para cada borde.Si usa una versión moderna de IE con marcado válido , un buen doctype y encabezados apropiados , se adherirá al estándar. De lo contrario, puede forzar a los navegadores modernos que cumplen con los estándares a usar "border-box" a través de:
La primera declaración 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é declaración de tamaño de caja admite su navegador: http://phrogz.net/CSS/boxsizing.html
Tenga en cuenta que Webkit (Safari y Chrome) no admite el
padding-boxmodelo de caja mediante ninguna declaración.fuente
Una regla simple es tratar de evitar el uso de la propiedad de relleno / margen y ancho para el mismo elemento. es decir, usar algo similar a esto
fuente
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 tope con este hilo.
CSS3 ahora tiene una propiedad de tamaño de caja. Si establece, diga,
su clase tendrá 1000px de ancho, en lugar de 1030px. Esto es, por supuesto, increíblemente útil para cualquiera que use un borde del tamaño de un píxel con divisores líquidos, porque resuelve un problema insoluble.
Aún mejor, el tamaño de caja es compatible con todos los principales navegadores, excepto IE7 y versiones inferiores. Para incluir todos los elementos dentro de la dimensión de ancho o alto, establezca el tamaño del cuadro en borde-cuadro. A 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 sintaxis del navegador, pero sigo incluyendo los prefijos -moz y -webkit:
fuente
¿Tienes un doctype declarado? Cuando comencé a codificar html tuve este problema, y era por no tener un doctype declarado. Mi favorito es:
fuente
Para aquellos que aún tendrían el problema, jQuery proporcionó dos propiedades
outerWidth ()yinnerWitdh ()conocer el ancho de un objeto con o sin bordes ...fuente