CSS中同宽度绝对定位元素渲染后显示宽度不一致的原因

该现象是浏览器亚像素渲染机制导致的，和CSS代码编写错误没有关系。
首先按标准盒模型计算，案例里所有子元素的实际逻辑宽度完全一致：设置width: 1px加上左右各1px的边框，每个子元素的总逻辑宽度为3px，三个子元素的盒模型参数不存在任何差异。

浏览器渲染页面时，需要把CSS计算得到的逻辑像素坐标，映射到屏幕的实际物理像素上：

• 当元素边缘刚好落在两个物理像素的分界线上时，浏览器会渲染出锐利、宽度准确的纯色线条
• 当元素边缘落在两个物理像素之间的亚像素位置时，浏览器会通过抗锯齿算法，调整相邻物理像素的色值来模拟“半像素”位置的显示效果，这种渲染方式会让线条看起来比实际更粗或者更模糊

案例中第二个子元素的left: -21px偏移值，刚好让它的边框/内容边缘落在物理像素的非整数对齐位置，触发了亚像素抗锯齿，因此视觉上和另外两个刚好对齐物理像素边界的子元素宽度有差异。
该现象和浏览器版本、设备的屏幕像素比、页面缩放比例都有关系，不同环境下出现宽度差异的元素可能会变化，不属于代码bug。

如果需要让所有线条视觉宽度完全一致，可以选择以下任意一种方案：

• 给子元素添加box-sizing: border-box，将边框宽度纳入设置的1px宽度内，降低亚像素落点的概率
• 微调left偏移值，让元素边缘对齐物理像素边界
• 给子元素添加transform: translateZ(0)，触发GPU独立合成层渲染，减少亚像素偏移带来的视觉差异

修正后的基础样式参考：

.container {
  position: relative;
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin: 50px;
}

div > * {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0px;
  border: 1px solid red;
  box-sizing: border-box;
  /* 可选：开启GPU加速 */
  /* transform: translateZ(0); */
}

#child1 {
  left: -15px;
}

#child2 {
  left: -21px;
}

#child3 {
  left: -27px;
}

<div class="container">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
</div>

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