overflow:hidden容器与absolute子元素间1px间隙问题求助

这是浏览器亚像素渲染的精度偏差导致的——当容器尺寸为非整数像素（或经过页面缩放）时，绝对定位元素的边缘计算会出现微小误差，导致父元素背景透出1px左右的间隙。以下是几种实用的解决方法：

方案一：微小缩放子元素 #

通过transform: scale()让子元素轻微放大，刚好覆盖间隙，且不会影响页面布局，动画场景下性能最优：

.parent {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    overflow: hidden; /* 补全问题中提到的overflow:hidden属性 */
}
.children {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: white;
    transform: scale(1.002); /* 缩放比例可根据实际情况微调 */
    transform-origin: center;
}

方案二：负偏移覆盖间隙 #

直接让子元素超出父元素1px，利用父元素的overflow:hidden裁剪多余部分，彻底覆盖间隙：

.parent {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    overflow: hidden;
}
.children {
    position: absolute;
    inset: -1px; /* 等价于top/right/bottom/left: -1px，一次性设置四个方向 */
    background: white;
}

（注：单独设置单方向负偏移无效，是因为没同时覆盖所有边缘的间隙）

方案三：同色阴影填补间隙 #

用与子元素背景色一致的1px阴影，填补边缘的微小间隙：

.parent {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    overflow: hidden;
}
.children {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: white;
    box-shadow: 0 0 0 1px white; /* 阴影尺寸等于间隙大小，颜色与子元素背景一致 */
}

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