unidad - ¿A dónde van los píxeles perdidos en un diseño de porcentaje de CSS?

unidades de medida en css (5)

Posible duplicado:
Altura uniformemente distribuida de elementos secundarios con CSS

Digamos que tengo un diseño con 6 DIV flotantes a la izquierda con un ancho del 16.666%. Entonces, el tamaño del documento está dividido en 6 partes.

Ahora, si tengo un tamaño de documento de digamos 620px de ancho, esto haría que cada parte sea 103.333px. Como no conozco pantallas que puedan mostrar píxeles parciales :) Me pregunto cómo maneja el navegador los píxeles parciales.

Aquí está mi testcase: http://jsfiddle.net/dhQh2/ (Simplemente cambie el tamaño de la ventana para obtener un resultado)

Al redimensionar, las costuras de los 6 DIVs mantienen el mismo tamaño. Pero en algunos casos no puede ser. ¿Cómo maneja el navegador esos valores parciales de PX?

Dependiendo de qué navegador estés usando, cambia lo que sucede. Algunos navegadores pueden redondear el valor. Algunos lo obligan a redondear (math.ceil en algunos lenguajes) y algunos redondean hacia abajo o "truncan". Por ejemplo, Google Chrome trunca los decimales.

Puede probar fácilmente los efectos de esto mediante una prueba de impresión y luego verificar el tamaño en un editor de pintura (paint, paint.net, adobe photoshop, etc.)

Pregunta muy interesante, sin embargo :)

Firefox 4:

El div alrededor de estos 6 divs tiene un borde. Cuando lentamente cambia el tamaño de toda la ventana, ve que el borde "salta". Esto significa que todos los divs tienen el mismo ancho, pero la suma es menos / más del 100%. Cuando cambia el tamaño solo de la div contenida píxel por píxel, verá que no todos los divs cambian el ancho simultáneamente.

Van en el cielo de píxeles;)

Solo bromeaba. Lo más probable es que diferentes navegadores lo manejen de diferentes maneras.

El primer enfoque que tengo en mente es calcular el ancho de cada área. Luego, redondearlo al int más cercano. El resto de los píxeles se quedan vacíos.

Otro enfoque, podría estar llenando la última área, cualquiera que sea el ancho (con un pequeño margen de errores).

Pregunta muy interesante: podría ser bueno tener el control sobre este comportamiento con CSS de hecho.

Ver esta publicación:

¿Se respetan los lugares decimales en un ancho de CSS?

Si, por ejemplo, está utilizando un % ancho, y el ancho exacto debe ser 103.333px , entonces el navegador debe tomar una decisión sobre cómo mostrar eso.

Los diferentes navegadores toman decisiones diferentes; lea estos enlaces para obtener más información:

Particularmente me gusta esta explicación de John Resig / David Baron sobre por qué esto es incluso un problema:

Estuve hablando de esto con algunos desarrolladores de Mozilla y David Baron explicó la situación bastante bien:
Estamos tratando de cumplir con una serie de restricciones que no todas pueden satisfacerse al mismo tiempo (la prueba queda como un ejercicio para el lector, aunque es posible que la haya escrito una vez en un comentario de Bugzilla):
4 objetos adyacentes de ancho / alto 25% (por ejemplo) comenzando en un borde de un contenedor deben terminar exactamente en el otro borde; nunca debe haber un píxel extra en el contenedor y nunca deben ser envueltos debido a que son un píxel a ancho
los objetos que son lógicamente adyacentes siempre deben tocar visualmente; nunca debe haber una brecha de píxeles o un píxel de superposición debido a un error de redondeo
los objetos con el mismo ancho deben ocupar la misma cantidad de píxeles
los límites de los objetos siempre deben estar (visualmente) alias a un límite de píxel específico en la pantalla (nunca deben estar borrosos)
Los sacrificios [de Mozilla] son típicamente (3), excepto en los bordes donde sacrificamos (1) al redondear los anchos a los límites de píxeles mucho antes.

Consulte esta pregunta para obtener una solución de JavaScript que fuerza la coherencia:

Altura uniformemente distribuida de elementos secundarios con CSS

Otra pregunta relevante:

¿Se respetan los lugares decimales en un ancho de CSS?