html - Chrome 缩小打破了线性渐变背景

Question

我正在使用渐变背景为绝对定位的行显示交替背景。

在 Chrome 中缩小时，布局会变得困惑。渐变背景大小的计算似乎与上边距的计算不同。

我创建了一个 JSFiddle 来说明问题:http://jsfiddle.net/4y3k2/4/ .当缩小到例如75% 前景和背景之间出现偏移。偏移量越来越大，以至于最后一行的布局看起来完全被破坏了。

这是我的代码:

#container {
    position: absolute;
    height: 2000px;
    width: 100px;
    background: linear-gradient(red 50%, green 50%, green);
    background-size: 40px 40px;
}
.row {
    position: absolute;
}    

<div id="container">
    <div class="row" style="top: 920px;"></div>
</div>

在 IE 和 Firefox 上一切正常。

Answer 1

你可以这样做而不用每次都计算 top对于每一行。

而是将父 div 设置为一个 block 并使用每行的预定义高度和宽度，同时将它们 float 到左侧:

#container {
    position: absolute;
    height: 2000px;
    width: 100px;
    background: linear-gradient(red 50%, green 50%, green);
    background-size: 40px 40px;
    display: block;
}

.row {
    float: left;
    width: 100px;
    height: 20px;
}

http://jsfiddle.net/4y3k2/11/