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

Question

Algo que me he estado preguntando durante un tiempo mientras hacía un diseño CSS.

¿Se respetan las decimales en los anchos css? ¿O están redondeados?

.percentage 
{ 
    width: 49.5%; 
} 

o

.pixel 
{ 
    width: 122.5px; 
} 

Answer 1

Si se trata de un ancho porcentaje, entonces yes, it is respected. Como señaló Martin, las cosas se descomponen cuando alcanzas píxeles fraccionarios, pero si tus porcentajes arrojan un valor de píxel entero (por ejemplo, 50.5% de 200px en el ejemplo) obtendrás un comportamiento razonable y esperado.

Editar: Tengo updated the example to show what happens to fractional pixels (en Chrome los valores están truncados, por lo que 50, 50.5 y 50.6 muestran todos el mismo ancho).

Answer 2

La anchura se redondeará a un número entero de pixeles.

no sé si todos los navegadores lo redondeará la misma manera sin embargo. Todos parecen tener una estrategia diferente al redondear porcentajes de subpíxeles. Si está interesado en los detalles del redondeo de subpíxeles en diferentes navegadores, está an excellent article on ElastiCSS.

editar: He probado @ Skilldrick's demo en algunos navegadores por curiosidad. Al utilizar fraccional píxeles valores (no porcentajes, funcionan como se sugiere en el artículo he vinculado) IE9p7 y FF4b7 parecen redondear al píxel más cercano, mientras que Opera 11b, Chrome 9.0.587.0 y Safari 5.0.3 trunca los decimales. No es que yo esperaba que tenían algo en común después de todo ...

Answer 3

Aun cuando el número se redondea cuando se pinta la página, el valor total se conserva en la memoria y se utiliza para el cálculo posterior del niño. Por ejemplo, si su cuadro de 100.4999px pinta a 100px, su hijo con un ancho del 50% se calculará como .5 * 100.4999 en lugar de .5 * 100. Y así sucesivamente a niveles más profundos.

que he creado sistemas de diseño de cuadrícula profundamente anidados donde los padres anchos areEMS, y los niños son porcentajes, e incluyendo un máximo de cuatro puntos decimales aguas arriba tenido un impacto notable.

Edge caso, claro, pero algo a tener en cuenta.

Answer 4

Parecen redondear los valores al entero más cercano; pero veo incongruencia en Chrome, Safari y Firefox.

Para por ejemplo si 33,3% convierte a 420.945px

cromo y firexfox muestran como 421px. mientras que safari muestra su 420px.

Esto parece como Chrome y Firefox siguen la lógica baja y ceil mientras que Safari no lo hace. Esta página parece discutir el mismo problema

http://ejohn.org/blog/sub-pixel-problems-in-css/

Answer 5

Aunque píxeles fraccionarios pueden aparecer para redondear en elementos individuales (como @SkillDrick demuestra muy bien) es importante saber que los píxeles fraccionarios son en realidad respetado en el modelo de caja real.

Esto se ve mejor cuando los elementos se apilan uno al lado del otro (o encima de); en otras palabras, si tuviera que ubicar 400 divs de 0.5 píxeles uno al lado del otro, tendrían el mismo ancho que un único div de 200 píxeles. Si todos en realidad son redondeados a 1px (como se vería en los elementos individuales implicaría) esperaríamos que el div 200px fuera la mitad de largo.

Esto se puede ver en this CSSDesk sketch,

o si desea probarlo en navegadores antiguos (que no son compatibles con CSSDesk) se puede utilizar el siguiente marcado/CSS:

body { 
 
    color:   white; 
 
    font-family:  sans-serif; 
 
    font-weight:  bold; 
 
    background-color: #334; 
 
} 
 

 
.div_house div { 
 
    height:   10px; 
 
    background-color: orange; 
 
    display:   inline-block; 
 
} 
 

 
div#small_divs div { 
 
    width:   0.5px; 
 
} 
 

 
div#large_div div { 
 
    width:   200px; 
 
}

<div class="div_house" id="small_divs"> 
 
    <p>0.5px div x 400</p> 
 
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
 
</div> 
 
<br> 
 
<div class="div_house" id="large_div"> 
 
    <p>200px div x 1</p> 
 
    <div></div> 
 
</div>

Answer 6

elementos tienen que pintar a un número entero de píxeles, y como las otras respuestas cubiertos, los porcentajes son en efecto respetados.

Una nota importante es que pixeles en este caso significa pixeles css, no detectar píxeles, por lo que un recipiente 200 píxeles con un niño 50,7499% serán redondeados a 101px pixeles css, que luego son prestados en 202px en una pantalla de retina, y no 400 * .507499 ~ = 203px.

La densidad de la pantalla se ignora en este cálculo, y no hay forma de ajustar el tamaño de un elemento a los tamaños de subpíxeles de retina específicos. No puede tener fondos o bordes de elementos renderizados en menos de 1 css pixel tamaño, aunque el tamaño real del elemento podría ser inferior a 1 css pixel como lo mostró Sandy Gifford.

Answer 7

Interesante, entre la respuesta de natekoechley y la de Olex Ponomarenko, que los valores exactos se almacenan en la memoria y se tienen en cuenta para algunas cosas, pero no para todas.