为何使用mm单位时，CSS中width与margin的计算样式不同？

当给可见节点的width或marginLeft设置为10px时，各浏览器计算出的样式值均为10px；但设置为1mm时，不同浏览器得到的结果却不一致。

运行以下代码：

const d = document.body.appendChild(document.createElement('div'));
d.style.marginLeft = d.style.width = '1mm';
const cs = window.getComputedStyle(d);
console.log(cs.width, cs.marginLeft);

得到的计算结果如下：

请问为何会出现这种差异？

1. px与mm的本质区别 #

px是CSS的设备无关像素，是浏览器渲染的基础单位，本身就和浏览器的渲染逻辑直接绑定，所以设置固定px值时，所有浏览器的计算结果能保持一致。而mm是物理尺寸单位，需要经过转换才能映射到CSS像素，这个转换过程就是差异的来源。

2. 物理单位转CSS像素的实现差异 #

理论上1mm = 1/25.4英寸，但CSS像素的实际大小和设备的屏幕密度（DPR，设备像素比）、系统显示设置相关。不同浏览器的渲染引擎（Blink/Chrome、Gecko/Firefox、WebKit）在实现转换时：

• 可能采用不同的基准DPR值；
• 对小数的舍入、截断策略不同；
• 甚至会根据系统的显示缩放级别做微调，这些都会导致最终计算出的像素值出现偏差。

3. 不同CSS属性的渲染处理差异 #

同一个浏览器中width和marginLeft的计算值也有细微差别，这是因为：

• width属于盒模型的内容区域，margin是外边距，浏览器在处理这两类属性时，处于渲染管线的不同阶段；
• 不同阶段的精度保留规则、舍入时机不一样，最终输出的像素值就会出现细微差异。

4. CSS规范的灵活性允许差异 #

CSS规范只定义了物理单位与CSS像素的大致转换比例，并没有强制要求精确到固定小数位。浏览器厂商可以在合理范围内自主实现转换逻辑，这就给不同浏览器的差异留下了空间。

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