CSS ¿el ancho incluye el relleno?

132

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?CSS ¿el ancho incluye el relleno?

Gracias.

Fuente

2011-01-15 Jake

Es probable que tenga que activar el modo compatible con los estándares. Sin embargo, sin ver un código, no puedo darte más guía que eso. –

283

IE utiliza para utilizar el "border-box" más conveniente, pero-no-estándar modelo caja. 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 de ancho.
Por el contrario, todos los navegadores que temen las normas de forma predeterminada al cuadro de contenido modelo de caja. En este modelo, el ancho de un elemento no incluye relleno o bordes. Por ejemplo:
#foo { width: 10em; padding: 2em; border: 1em; }
realmente ser 16em amplia: 10em + 2em relleno para cada lado, + 1em frontera para cada borde.

Si utiliza una versión moderna de IE con valid markup, un good doctype y appropriate headers que se adhiere a la norma. De lo contrario, puede forzar compatibles con los estándares modernos navegadores para usar "border-box" a través de: Se necesita

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

La primera declaración de la Opera, el segundo es para Firefox, el tercero es para Webkit y Chrome.

Aquí es una prueba sencilla que hice hace años para las pruebas de lo que la caja de dimensionamiento de la declaración es compatible con su navegador: http://phrogz.net/CSS/boxsizing.html

Tenga en cuenta que Webkit (Safari y Chrome) no son compatibles con el modelo padding-box caja a través de cualquier declaración.

Fuente

2011-01-15 04:59:55 Phrogz

+1 por mencionar tanto el cuadro de contenido como los modelos de recuadro de borde. Sin embargo, es posible que desee profundizar en las diferencias. – BoltClock

@BoltClock Gracias por el impulso para responder con más rigor. Actualizado. – Phrogz

Buena respuesta; He estado tratando de recordar (o encontrar) los nombres de las diferentes opciones por un par de días ... +1 =) –

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

<div class="width-div"> 
    <div class="padding-div"> 
    ........... 
    ........... 
    </div> 
</div>

Fuente

2011-01-15 04:59:44 shankhan

Utilizo este método de forma regular y nunca he tenido problemas con el navegador. –

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

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
... 
</html>

Fuente

2011-01-15 15:28:23 tybro0103

me encontré con esta pregunta y aunque se trata de un par de años, pensé que podría añadir esto en caso de que alguien se tropieza 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; 
}

su clase será de 1000 px de ancho, en lugar 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.

Aún mejor, tamaño de la caja es compatible con todos los navegadores más importantes, excepto IE7 y siguientes.Para incluir todos los elementos dentro de la dimensión de ancho o alto, configure el tamaño del cuadro para el recuadro de la frontera. Para agregar otros elementos para el 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 todavía incluyen prefijos y -moz -webkit:

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

Fuente

2014-02-10 17:36:09

Sí, y Paul Irish tiene un buen artículo de blog sobre esto aquí: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

Respuesta

Cuestiones relacionadas