为何CSS border不同取值时div总宽度不符合预期？

测试代码 #

JavaScript

document.querySelector(".container").addEventListener("click", getEvent);

function getEvent() {
  console.log("clicked");
  console.log(document.querySelector(".container").offsetWidth);
}

CSS

.container {
  width: 100px;
  padding: 50px;
  border: 10px solid black;
}

HTML

<div class="container">
  this is container div
</div>

不同border值下的总宽度测试数据 #

问题原因分析 #

这种异常是因为浏览器的像素对齐（Pixel Snapping）机制导致的。

当元素的实际计算宽度不是整数像素时，浏览器会自动将其对齐到最近的整数像素值，避免出现模糊的半像素渲染。

拿你的测试案例来说：

• 标准盒模型下，元素总宽度计算公式是：width + 2*padding + 2*border
• 当border设为2px时，理论总宽度是100 + 2*50 + 2*2 = 204px，但如果页面存在缩放（比如浏览器默认缩放不是100%），或者屏幕的设备像素比（DPR）不是1，计算后的实际像素可能会被浏览器做取整处理，导致最终offsetWidth少1px。
• 再看border为10px的情况，理论值220px，但实际得到219px，同样是因为像素对齐时的取整操作——当元素的布局位置或尺寸涉及到非整数像素时，浏览器会优先保证渲染清晰度，牺牲严格的数值精度。

另外需要注意：offsetWidth返回的是四舍五入后的整数像素值，它不是精确的CSS计算值，而是浏览器实际渲染时使用的像素尺寸。如果要获取精确的计算值，可以用getComputedStyle(element).width（需自行转换为数值），不过即使这个值，在某些情况下也会因为像素对齐被调整。

内容的提问来源于stack exchange，提问作者maththi siva charan