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

Question

每当非整数像素值用于元素的边界时,浏览器只是将该值截断为整数.为什么会这样？

我知道边框实际上不会占用像素的一部分,但这些类型的值有时会与其他值组合使用以形成完整像素.例如,宽度为1.6px的左右边框应使元素的总宽度增加3px.这是有效的,因为完整值存储在内存中并用于计算.

但是,即使宽度,填充和边距都表现正确,渲染边框时似乎也不是这种情况.

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(正确计算边框顶部宽度)的例外.

宽度,填充和边距都被记为十进制值,并允许填充相应地影响高度,但边界不是.它被截断为整数.为什么这只是宽边边框？是否有任何方法可以更全面地记住边界值,以便可以使用JavaScript检索元素的真实高度？

Answer 1

简单的解释是浏览器在内部使用整数作为边界宽度(或者至少公开地公开它们).

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

我们几乎无能为力,为什么:在CSS背景和边框的W3C规范中,关于边框宽度的信息非常少.它只说line-width没有关于如何处理这个单位的单位,类型或定义,除非它是绝对的(非负):

值:<line-width>
[...]
计算值:绝对长度; 如果边框样式为"无"或"隐藏",则为"0"

和:

没有指定对应于"薄","中"和"厚"的长度,但是整个文档中的值是恒定的,薄≤中等≤厚.例如,UA可以使厚度取决于"中等"字体大小:当"中"字体大小为17px或更小时,一个选项可能是1,3和5px.不允许使用负值.

在框模型文档中找到相同的信息,没有新的细节.

由于所有值最终都以像素值结束(因为我们的屏幕是像素设备),通过em,vw,%等的数字似乎最终成为一个整数,当涉及到边框宽度而不考虑子像素时.

在使用整数作为边框宽度的浏览器中,甚至变换(比例)似乎都不会影响这一点.

最后,似乎由浏览器供应商如何处理这些值 (这可能只是美学原因,这样做,表现,......我们只能猜测..).