“溢出：隐藏”并填充“绝对”子项

Question

我的视频叠加块有问题。 出现在每个方块中，其中有

overflow: hidden

并让孩子们充满

position: absolute

。如果我附加到边框绝对 div 或伪元素，则边框和绝对块之间有 1px 或更少的空间。我该如何解决这个问题？该错误破坏了页面上的许多动画。

我尝试设置

top: -1px

、

left: -1px

、

right: -1px

，但不起作用，

.parent {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background: red;
}
.children {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: white
}

<div class="parent">
    <div class="children"></div>
</div>

提前谢谢您！

Answer 1

这是由浏览器处理子像素渲染和舍入的方式引起的常见问题。您可以尝试使用转换：translate3d(0, 0, 0);绝对元素上的 CSS 属性。

.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;
    transform: translate3d(0, 0, 0); /* Add this line */
}