1px 边框宽度变为 0.666667px

Question

令我惊讶的是，以像素为单位的整数边框宽度可以得到小数渲染（1px => 0.666667px）。这怎么理解？

for (d of [d1, d2, d3, d4]) d.innerHTML += 'px ' + getComputedStyle(d)["border-width"]

<div id="d1" style="border: 1px solid">1</div>
<br>
<div id="d2" style="border: 2px solid">2</div>
<br>
<div id="d3" style="border: 3px solid">3</div>
<br>
<div id="d4" style="border: 4px solid">4</div>

http://jsfiddle.net/fo156jxm

另请参阅 在 Firefox 上获取错误的边框宽度

Answer 1

这是页面缩放。如果我缩放页面（大多数浏览器上的 Ctrl+= 和 Ctrl+-），我可以复制这一点。如果您将页面缩放设置为 100%（在大多数浏览器上为 Ctrl+0），您应该会看到您期望的数字。