Chrome缩小打破了线性渐变背景答案

【问题标题】：Chrome zoom out breaks linear-gradient backgroundChrome缩小打破了线性渐变背景
【发布时间】：2014-04-01 14:26:22
【问题描述】：

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

在 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 上一切正常。

【问题讨论】：

有什么理由不能正常地使用交替的 bg 颜色来设置这些行的样式吗？

标签： html css google-chrome cross-browser zooming

【解决方案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/

【讨论】：