Firefox 上的边框宽度错误

Question

当我将 border-width 设置为 1px 时，我得到的是 0.8，当我设置 5px 时，我得到 4.8，但这只是在 Firefox 中。

在 Google Chrome 上就很好了。

编辑：我的firefox版本是55.0.3

你知道发生了什么事吗？谢谢。

带有 h1 的橙色框：

计算值：

CSS 规则：

Answer 1

（为了解决讨论中的一些不确定性，发布半生不熟的半答案。）

\n

您的显示器的 DPI 系数为 125%。

\n

“CSS Pixel”代表虚拟尺寸并相应地映射到物理像素。浏览器会尽力渲染您所期望的内容，并且在边界的情况下，您最有可能期望锐利的边缘并且没有模糊的抗锯齿，但例如对于 100 \xc3\x97 1% 相对大小的子块，您希望它们填充100% 宽父级，无论这些分数有多么笨拙。为了满足这样的期望，浏览器会在“幕后”进行大量舍入和调整，因此难怪值在某些情况下可能会变得有点不可预测。

\n

您测量过屏幕截图中边框的尺寸吗？它不是5物理像素，也不是4.8（应该是模糊的），但实际上是6物理像素宽。

\n

老实说，我猜想computedStyle开发人员工具中的 和 值应该真正讲述 CSS 像素的“善意谎言”，并且生成的值对我来说也没有多大意义；希望有人权威地告诉我这是不是bug。

\n

一些测试：

\n

\r\n

\r\n

[].forEach.call(document.querySelectorAll(\'p\'), e => {\n  e.innerHTML = \', computed:\'\n  + getComputedStyle(e)[\'border-top-width\']\n  + \', rect.height: \'\n  + e.getBoundingClientRect().height\n})

\r\n

p {\n  border-color: red;\n  border-top-style: solid;\n  line-height: 20px;\n  margin: 10px;\n  padding: 0;\n}\n\np::before {\n  content: attr(style)\n}

\r\n

<p style="border-width:1px">\n<p style="border-width:2px">\n<p style="border-width:3px">\n<p style="border-width:4px">\n<p style="border-width:5px">\n<p style="border-width:6px">\n<p style="border-width:7px">

\r\n

\r\n

\r\n

\n

一些阅读：

\n

https://johnresig.com/blog/sub-pixel-problems-in-css/

\n

https://webplatform.github.io/docs/tutorials/understanding-css-units/#Final-thoughts

\n