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

您可以在不计算每次顶部的情况下执行此操作对于每一行。

而是将父div设置为块并使用每个行的预定义高度和宽度，同时将它们浮动到左侧：

#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/

Chrome缩小打破线性渐变背景

1 个答案: