为什么带1px边框的相对定位父级与绝对定位子元素会出现间隙？

问题原因 #

这个间隙是Chromium内核浏览器（Chrome、Opera等均基于该内核）的亚像素渲染特性导致的，Firefox采用了不同的渲染逻辑因此不存在该问题，在Windows系统下系统缩放比例为125%/150%时最容易复现。
当页面缩放比例不为100%、或者元素尺寸/边框计算后出现分数像素值时，Chromium在计算绝对定位元素的边界和父元素边框的边界时，会出现像素对齐的四舍五入偏差，漏出父元素下方的背景色，就会表现为二者之间的细小间隙。
具体到本次的代码场景，还有一个直接诱因：绝对定位元素的width: 100%和bottom: 0都是基于父元素的padding box计算，父元素的1px边框在padding box之外，当出现亚像素偏差时，二者边缘就无法完全贴合。

可行解决方案 #

可根据业务场景选择以下任意一种方案解决：

• 调整绝对定位的偏移量覆盖父元素边框：
  给子元素添加如下样式，让子元素边缘刚好覆盖父元素的1px边框：

  .child {
    left: -1px;
    bottom: -1px;
    width: calc(100% + 2px);
  }
  

• 触发GPU渲染修正亚像素计算偏差：给父元素添加transform: translateZ(0)样式，强制开启GPU加速渲染，规避Chromium的软渲染对齐误差。
• 用内边距替代定位参照：给父元素添加对应高度的padding-bottom，子元素取消绝对定位直接放在父元素底部，从根源上避免定位偏差。
• 模拟边框替代实体border：把父元素的1px实体border改为用box-shadow: 0 0 0 1px red模拟，不会影响定位参照的盒模型范围，也能避免该问题。

复现代码 #

CSS代码 #

.parent {
  height: 300px;
  width: 170px;
  border: 1px solid red;
  position: relative;
}
.child {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: green;
}

HTML代码 #

<div class="parent">
  <div class="child">hello</div>
</div>

示例截图 #

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