浏览器将边框值截断为整数 [英] Browsers truncate border values to integers

问题描述

每当将非整数像素值用于元素的边框时，浏览器只是将该值截断为整数。为什么会是这种情况？

我知道边框不会实际上占用像素的一部分，但这些类型的值有时与其他组合使用以形成完整像素。例如，宽度为1.6px的左右边框应使元素的总宽度增加3px。这是因为。它只说明了除了它是绝对的（非负的）之外如何处理这个单位的 line-width ，没有单位，类型或定义：

值：< line-width>

[...]

计算值：如果边框样式为none或hidden，则为'0'

和：

'thin'，'medium'和'thick'对应的长度不是
，而是整个文档中的值是不变的，而
≤中等厚度。 UA可以例如使得厚度取决于
'中等'字体大小：一个选择可以是1,3和4。 5px当'medium'
字体大小为17px或更小。

找到相同的信息没有新的详细信息。

作为全部值最终会以像素值（像我们的屏幕是像素设备）的形式通过 em ， vw >

似乎没有转换（scale）似乎是一个整数，而不考虑子像素化。

最后，似乎是由浏览器供应商如何处理这些值可能只是美观的原因，这样做，性能，我们只能猜测..）。

Whenever a non-integer pixel value is used for the border of an element, the browser simply truncates the value to become an integer. Why is this the case?

I'm aware that the border will not actually take up part of a pixel, but these types of values are sometimes used in combination with others to form full pixels. For example, the left and right border having widths of 1.6px should cause the total width of the element to increase by 3px. This works because the full value is stored in memory and used for calculations.

However, this seems to not be the case when rendering the border even though width, padding, and margin all behave correctly.

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>

When tested, the code produced the same results (disregarding exact precision) consistently. Most major browsers (Chrome, Firefox, Opera) behaved the same. The exceptions were Safari 5.1 (which rendered padding and margin similar to border, but this is probably just due to the version) and Internet Explorer (which calculated the border-top-width correctly).

Width, padding, and margin all were remembered as decimal values and allowed for padding to affect height accordingly, but border was not. It was truncated to an integer. Why is this specifically only the case width border? Would there be any way to make the border value be remembered in a fuller form so that the true height of the element could be retrieved using JavaScript?

解决方案

The simple explanation is that the browser uses integers for border widths internally (or at least exposes them publicly as such).

An example of this is the source code of Chrome (Chromium) which in the file ComputedStyle.h defines all border-widths as integers (line 508):

There is little we can do with that and as to why: there is very little information about border widths in the W3C specification for CSS Backgrounds and Borders. It only states line-width with no units, type or definition about how to treat this unit except it is absolute (non-negative):

Value: <line-width>
[...]
Computed value: absolute length; ‘0’ if the border style is ‘none’ or ‘hidden’

And:

The lengths corresponding to ‘thin’, ‘medium’ and ‘thick’ are not specified, but the values are constant throughout a document and thin ≤ medium ≤ thick. A UA could, e.g., make the thickness depend on the ‘medium’ font size: one choice might be 1, 3 & 5px when the ‘medium’ font size is 17px or less. Negative values are not allowed.

The same information is found in the box model document with no new details.

As all values eventually end up as pixel values (as our screens are pixel-devices) the number coming through em, vw, % etc. seems to end up as an integer when it comes to border widths without considering sub-pixeling.

Not even transforms (scale) seem to affect this in the browsers which use integers for border widths.

In the end, it seems to be up to the browser vendor how to treat these values (it could simply be aesthetic reasons for doing so, performance, .. we can only guess..).

这篇关于浏览器将边框值截断为整数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！