使用rem单位设置带border的div时无法与另一div尺寸相等

问题根因 #

你遇到的亚像素偏差是rem单位转px渲染时的多次独立取整误差导致的：

• rem单位最终会被浏览器转换为px单位进行渲染，当根font-size和rem值的乘积不是整数时，浏览器会对每个CSS属性的换算结果单独做截断/四舍五入处理
• 你手动拆分计算宽高的写法，会让浏览器分别对「第一个div宽高」「第二个div宽高」「border宽度」三个值做独立换算，三次的浮点精度误差叠加就会出现1px以内的尺寸差
• px单位不会有这个问题是因为不需要做单位转换，没有浮点误差环节

最优解决方案 #

直接使用box-sizing: border-box属性统一两个div的盒模型规则，不需要手动减去border宽度，从根源避免多次换算的误差：

<body>
  <div style="height: 10.16rem; width: 10.16rem; background-color: aqua;"></div>
  <!-- border-box模式下border会被包含在设置的宽高内部，不需要手动减边框厚度 -->
  <div style="box-sizing: border-box; height: 10.16rem; width: 10.16rem; border: 0.08rem solid aqua; background-color: blue;"></div>
</body>

这个方案完全不需要修改原有rem数值，也不会影响业务逻辑适配，兼容所有现代浏览器。

备选方案（无法修改盒模型时使用） #

如果业务场景不允许修改盒模式，可以使用CSS calc()表达式结合变量统一计算，减少独立换算的次数：

:root {
  --box-size: 10.16rem;
  --border-width: 0.08rem;
}

<body>
  <div style="height: var(--box-size); width: var(--box-size); background-color: aqua;"></div>
  <div style="height: calc(var(--box-size) - 2 * var(--border-width)); width: calc(var(--box-size) - 2 * var(--border-width)); border: var(--border-width) solid aqua; background-color: blue;"></div>
</body>

浏览器会对calc表达式的整体结果做一次单位转换，误差会比手动写死拆分后的值小很多。

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