浏览器将边框值截断为整数

每当非整数像素值用于元素的边框时，浏览器都会将该值截断为整数。为什么会这样呢？

我知道边境不会actually占用像素的一部分，但这些类型的值有时与其他值结合使用以形成完整像素。例如，宽度为 1.6px 的左右边框应导致元素的总宽度增加 3px。这有效是因为完整值存储在内存中并用于计算 https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected.

然而，即使宽度、填充和边距都表现正常，渲染边框时情况似乎并非如此。

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>

测试时，代码始终产生相同的结果（不考虑精确精度）。大多数主要浏览器（Chrome、Firefox、Opera）的行为都是相同的。 Safari 5.1（它呈现类似于边框的填充和边距，但这可能只是由于版本）和 Internet Explorer（它正确计算边框顶部宽度）是例外。

宽度、内边距和边距都被记住为十进制值，并允许内边距相应地影响高度，但边框则不然。它被截断为整数。为什么这只是案例宽度边框？有没有办法让边界值以更完整的形式被记住，以便true可以使用 JavaScript 检索元素的高度吗？

简单的解释是，浏览器在内部使用整数作为边框宽度（或者至少公开它们）。

一个例子是 Chrome (Chromium) 的源代码，它在文件 ComputedStyle.h 中将所有边框宽度定义为整数 ():

我们对此无能为力why：关于边框宽度的信息很少CSS 背景和边框的 W3C 规范 http://www.w3.org/TR/css3-background/#the-border-width。它仅说明line-width没有单位，关于如何处理该单位的类型或定义，除非它是绝对的（非负）：

值：
[...]
计算值：绝对长度；如果边框样式为“无”或“隐藏”，则为“0”

And:

“薄”、“中”、“厚”对应的长度不是 指定的，但值在整个文档中是恒定的并且很薄 ≤ 中等 ≤ 厚。例如，UA 可以使厚度取决于 ‘medium’字体大小：当‘medium’时，一种选择可能是 1、3 和 5px 字体大小为 17px 或更小。不允许使用负值。

找到了同样的信息在盒子模型文档中 http://www.w3.org/TR/CSS2/box.html#value-def-border-width没有新的细节。

As all值最终成为像素值（因为我们的屏幕是像素设备）通过的数字em, vw, %当涉及到边框宽度时，等等似乎最终成为一个整数，而不考虑子像素化。

在使用整数作为边框宽度的浏览器中，甚至变换（缩放）似乎都不会影响这一点。

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..).