2010-11-16 28 views
5

Tengo una pregunta sobre CSS en Firefox.Firefox agrega ancho adicional con relleno

Si fijo el ancho de un div flotante - digamos 200px - configurando un relleno - left a 10px, en Firefox agregará esos 10px extra al ancho. En IE, ese no es el caso.

¿Qué se puede hacer para evitar que Firefox agregue el ancho adicional al div?

+4

Siempre, pero siempre el diseño de su presentaciones de un navegador compatible con los estándares como FF y Chrome. Luego regrese y descubra los lugares en los que IE arruina las cosas. – Stephen

+1

Lo que tienes allí es IE en modo peculiar. FF está presentando el CSS correctamente usando el "modelo de caja". Aprenda sobre el modelo de caja aquí: http://www.w3schools.com/css/css_boxmodel.asp. Es posible que desee hacer otra pregunta con su código, podemos ayudarle a obtenerla. –

Respuesta

8

No es Firefox ese es el problema, es IE.

IE no está funcionando según las normas, hay algunos trucos para esto, pero todos ellos son un dolor en el culo: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

La forma más sencilla es incluir una estricta etiqueta de tipo de documento válido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

a continuación, sólo volver a escribir el CSS para el modelo de caja compatible con los estándares

More doctypes here

+0

Las páginas web correctas pero nuevas siempre deben usar el doctype estricto. – Rob

+0

¡Eso es lo que dije! : D –

+0

Muestra el tipo de documento de transición. – Rob

4

por defecto, la caja de dimensionamiento está configurado en content-box en mozilla y border-box en IE.

mediante el uso de:

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 

en su estilo puede establecer caja de medición de Mozilla, Safari y Opera a la frontera de la caja también.

Para más información visitá: http://www.css3.info/preview/box-sizing/

Cuestiones relacionadas