div - title html css

100% de ancho es más grande que la división de los padres (3)

El problema aquí es que el width es un tamaño del área interna con texto, y el relleno con borde se "envuelve" alrededor de él. Esa especificación no tiene sentido, pero la mayoría de los navegadores modernos la siguen.

Su salvador se llama box-sizing: border-box; .

.threadbit .thread { /* ... some stuff ... */ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }

Mira aquí: jsFiddle

Más información sobre esta propiedad here y here .

Estoy trabajando en vBulletin theme, pero en la lista de hilos, cada hilo tiene un 100% de ancho, pero los hilos también son más grandes que sus padres, pero cuando elimino el borde de los hilos, se ajustarán al div de los padres :). Así que creo que este problema está en las fronteras.

Se puede ver mejor en jsfiddle (el hilo es una forma blanca con un borde negro)

<body> <div class="after-body"> <div class="body-wrapper"> <div class="threadlist"> <ol class="threads"> <li class="threadbit"><div class="thread"></div></li> <li class="threadbit"><div class="thread"></div></li> </ol> </div> </div> </div> </body>

Sí, tienes razón, los bordes están empujando el "ancho" del elemento. El es el here de la here defecto de los navegadores modernos. Esto se puede modificar en la mayoría con una declaración como:

.threadbit .thread { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }

Tenga en cuenta que no es compatible con IE8, por lo tanto, dependiendo de lo que esté creando y del soporte que desee, es posible que deba encontrar una solución o diseño alternativo.

EDITAR

Ha pasado un tiempo desde que mi respuesta original y el soporte del navegador han cambiado ligeramente. Firefox 29, Chrome 10, Safari 5.1 e Internet Explorer 8 en adelante son compatibles box-sizing caja sin prefijo, sin embargo, existen algunos problemas conocidos de versiones particulares.

La lista completa / actualizada está disponible en caniuse.com Sin embargo, aquí hay algunos que me caniuse.com importantes del sitio:

IE8: ignora box-sizing: border-box : box-sizing: border-box si se usa min / max-width / height
IE8: la propiedad de min-width aplica al content-box incluso si box-sizing se establece en border-box
IE9: el ancho de la barra de desplazamiento se resta del ancho del elemento cuando se establece en la position: absolute y cualquiera de overflow: auto o overflow-y: scroll

A medida que disminuya la participación de mercado para IE8 e IE9, estos problemas y los otros que figuran en Caniuse serán un problema menor en el futuro.

Siempre recuerde cuando encuentre problemas relacionados con las dimensiones de verificación de ancho del elemento a través del modelo de caja de la herramienta de desarrollador de Firefox o de la caja de metrix de Chrome. Siempre es una buena idea incluir

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

También asegúrese de comprobar la propiedad de visualización. Si un elemento se muestra en línea, no tomará los valores de ancho, margen y relleno, y si se muestra como bloque en línea, tomará ancho, margen y relleno.

Aquí hay un enlace para la propiedad de tamaño de caja http://www.paulirish.com/2012/box-sizing-border-box-ftw/