在Google Chrome中放大时，背景重复1像素

Question

我在谷歌浏览器（桌面和移动设备）中遇到了一个非常奇怪的问题。这是jsfiddle example。 如果放大到500％，你会看到div顶部的绿线。似乎背景图像重复了一遍。绿线是我的背景图像的底线，如果我使背景图像底部透明，它就消失了。我在我的CSS中添加了repeat-x，但它仍然重复了我的图像的1个像素：

background: url('') repeat-x;

Answer 1

从所有内容中减去1px，包括背景x位置。

.red-div{
    background-color: red;
    height: 29px;
    width: 300px;
}

.child {
    width: 100%;
    height: 100%;
    background: url('') repeat-x;
    background-position:-1px 100%;

}

JSFiddle