在Firefox上获取错误的边框宽度

Question

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

在谷歌浏览器上就可以了。

编辑：我的firefox版本是55.0.3

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

带h1的橙色框：

计算值：

css规则：

Answer 1

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

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

“CSS Pixel”表示虚拟度量并相应地映射到物理像素。浏览器尽最大努力渲染您期望的内容，如果是边框，您最有可能期望锐边并且没有模糊的抗锯齿，但是例如对于100×1％相对大小的子块，您希望它们填充100％宽的父级，无论这些分数多么笨重。为了满足这些期望，浏览器会在“幕后”产生大量的舍入和调整，因此难怪在某些情况下值可能会有点不可预测。

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

老实说，我猜测开发人员工具中的computedStyle和值应该真正说明CSS像素的“好谎言”，而且产生的值对我来说也没有多大意义;我希望有人能够权威地判断它是否是一个错误。

一些测试：

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

p {
  border-color: red;
  border-top-style: solid;
  line-height: 20px;
  margin: 10px;
  padding: 0;
}

p::before {
  content: attr(style)
}

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

有些人读到：

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

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

Answer 2

检查你的jsfiddle后，运行正常，我想你很可能已经缩小了你的浏览器。

尝试 Ctrl + 0 或从菜单转到View-＆gt; Zoom-＆gt; Reset

计算标签截图