gratis - habilitar javascript en chrome en windows

Los navegadores truncan los valores de borde a enteros

Question

Cuando se utiliza un valor de píxel no entero para el borde de un elemento, el navegador simplemente trunca el valor para convertirse en un entero. ¿Por qué es este el caso?

Soy consciente de que el borde no ocupará realmente parte de un píxel, pero estos tipos de valores a veces se usan en combinación con otros para formar píxeles completos. Por ejemplo, el borde izquierdo y derecho con anchos de 1.6 px debe hacer que el ancho total del elemento aumente en 3 px. Esto funciona porque el valor completo se almacena en la memoria y se utiliza para los cálculos .

Sin embargo, parece que este no es el caso cuando se representa el borde, aunque el ancho, el relleno y el margen se comportan correctamente.

var div = document.getElementsByTagName(''div''),
    len = div.length,
    style;
for (var i = 0; i < len; i++) {
    style = getComputedStyle(div[i]);
    div[i].innerHTML = div[i].className + '': '' + style.getPropertyValue(div[i].className) + ''<br>height: '' + style.getPropertyValue(''height'');
}

div {
    width: 300px;
    border: 1px solid black;
    padding: 50px 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.width {
    width: 300.6px;
}
div.padding-top {
    padding-top: 50.6px;
}
div.margin-top {
    margin-top: 0.6px;
}
div.border-top-width {
    border-top-width: 1.6px;
}

<div class="width"></div>
<div class="padding-top"></div>
<div class="margin-top"></div>
<div class="border-top-width"></div>

Cuando se probó, el código produjo los mismos resultados (sin tener en cuenta la precisión exacta) de manera consistente. La mayoría de los principales navegadores (Chrome, Firefox, Opera) se comportaron igual. Las excepciones fueron Safari 5.1 (que representaba un relleno y un margen similar al del borde, pero probablemente se deba a la versión) e Internet Explorer (que calculaba el ancho del borde superior correctamente).

El ancho, el relleno y el margen se recordaron como valores decimales y se permitió que el relleno afectara a la altura en consecuencia, pero el borde no. Fue truncado a un entero. ¿Por qué esto es específicamente solo el borde ancho de la caja? ¿Habría alguna forma de hacer que el valor del borde sea recordado en una forma más completa para que la altura real del elemento pueda recuperarse utilizando JavaScript?

Answer 1

La explicación simple es que el navegador usa enteros para los anchos de los bordes internamente (o al menos los expone públicamente como tales).

Un ejemplo de esto es el código fuente de Chrome (Chromium) que en el archivo ComputedStyle.h define todos los anchos de borde como enteros ( línea 508 ):

Hay poco que podamos hacer con eso y en cuanto a por qué : hay muy poca información sobre los anchos de los bordes en la especificación W3C para Fondos y Bordes CSS . Solo indica line-width sin unidades, tipo o definición sobre cómo tratar esta unidad, excepto que es absoluta (no negativa):

Valor: <line-width>
[...]
Valor calculado: longitud absoluta; ''0'' si el estilo del borde es ''ninguno'' u ''oculto''

Y:

Las longitudes correspondientes a ''delgado'', ''medio'' y ''grueso'' no se especifican, pero los valores son constantes en todo un documento y delgado ≤ medio ≤ grueso. Una UA podría, por ejemplo, hacer que el grosor dependiera del tamaño de fuente ''medio'': una opción podría ser 1, 3 y 5px cuando el tamaño de fuente ''medio'' es 17px o menos. No se permiten valores negativos.

La misma información se encuentra en el documento modelo de caja sin nuevos detalles.

Como todos los valores finalmente terminan como valores de píxeles (como nuestras pantallas son dispositivos de píxeles), el número que viene a través de em , vw , % , etc. parece terminar como un entero cuando se trata de anchos de bordes sin considerar el subpíxel.

Ni siquiera las transformaciones (escala) parecen afectar esto en los navegadores que usan enteros para los anchos de borde.

Al final, parece que depende del proveedor del navegador cómo tratar estos valores (podrían ser simplemente razones estéticas para hacerlo, desempeño, .. solo podemos adivinar ...).

Answer 2

Por lo que puedo ver en algunas pruebas simples, los anchos de borde de subpíxeles funcionan exactamente como deberían. Creo que un error tipográfico en su ejemplo ("border-top-width" vs. "border-left-left") puede ser la causa de la discrepancia. Este ejemplo funciona como se espera para mí:

var div = document.getElementsByTagName("div");
for (var i = 0; i < div.length; i++)
{
    div[i].innerHTML += getComputedStyle(div[i]).getPropertyValue("width");
}

DIV
{
    width: 300px;
    border: 1px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
DIV.subpixel
{
    border-width: 1.23px;
}

<DIV>border-width: 1px<BR>width: </DIV>
<DIV CLASS="subpixel">border-width: 1.23px<BR>width: </DIV>