Chrome中border-width在窗口与浏览器缩放时的计算公式咨询

在Chrome 114版本中，当同时存在浏览器缩放和系统窗口缩放时，border-width的实际计算值会经过像素转换与对齐的流程，对应逻辑可拆解为以下公式与步骤：

具体计算流程 #

1. CSS值转设备像素
   设备像素值 = border-width的CSS设置值 × 浏览器缩放比例 × 系统窗口缩放比例
   （设备像素是屏幕的物理像素单位，高DPI缩放场景下，1个CSS像素会对应多个设备像素）

2. Chrome自动像素对齐
   为避免半像素导致的模糊，Chrome会将计算出的非整数设备像素值调整为最接近的整数设备像素

3. 转换回CSS像素（开发者工具显示值）
   实际计算的border-width（CSS像素） = 对齐后的整数设备像素 / (浏览器缩放比例 × 系统窗口缩放比例)

代入你的场景验证 #

你的参数：

• CSS设置值：7px
• 浏览器缩放比例：100%（即1）
• 系统窗口缩放比例：125%（即1.25）

计算过程：

1. 设备像素值 = 7 × 1 × 1.25 = 8.75
2. Chrome将8.75设备像素对齐为整数8
3. 实际计算值 = 8 / (1 × 1.25) = 6.4px

这个结果和你观察到的完全一致。

补充说明 #

这种像素对齐是Chrome在高DPI环境下的默认渲染优化，目的是保证元素边缘清晰。你提到的将系统缩放设为100%或使用box-sizing:border-box能解决不一致问题，本质是让渲染流程无需跨缩放层级做像素对齐，从而避免了这种值的偏差。

内容的提问来源于stack exchange，提问作者Danny