为什么用线性渐变渲染背景会有所不同？答案

【问题标题】：Why are there differences in rendering a background with a linear-gradient?为什么用线性渐变渲染背景会有所不同？
【发布时间】：2014-08-05 16:29:11
【问题描述】：

我有以下 CSS 代码：

html {
    font-size: 62.5%;
    background-color: #04BFBF;
    background: linear-gradient(to bottom, rgba(4, 191, 191, 0), rgba(4, 191, 191, 1)), url(seagreen-cloud.png);
    background-size: 100% auto;
}

这适用于 Chrome (v36) 和 Safari (v6.1.4)（即渐变被应用到图像并且两者都在背景中呈现），但不适用于 Firefox (v31)。我什至尝试使用 moz 前缀。

这是一个小提琴，但它并没有真正证明这个问题，因为 jsfiddle 取消了 html 和 body 标签：http://jsfiddle.net/marvery/3z327/

【问题讨论】：

CSS3 Transparency + Gradient的可能重复
这可能不是完全相同的副本，但您可以在那里找到您要查找的信息。
无论标签是否被指定或“移除”，html和body元素始终存在，因此您不必担心。

标签： css cross-browser linear-gradients

【解决方案1】：

您的页面没有正常的流高度，因为body 的所有子级都是divs，并且所有这些divs 都是绝对定位的，正常流中没有其他内容。您导入的重置会将body 上的边距清零。结果html和body的高度都为零。

我不太确定 Chrome 和 Safari 为何或如何渲染渐变，因为我实际上希望浏览器不会渲染渐变，因为渐变没有任何高度，而这正是 Firefox 正在做的。事实上，我无法让我的 Chrome 像你的那样渲染渐变——这可能是 Chrome/Mac 和 Chrome/Win 之间的另一个区别吗？

无论如何，解决方案是给这些元素一些高度，以便渐变有一个区域可以被绘制。问题是，由于您的所有divs 都是绝对定位的，因此没有简单的方法来确定页面的内容高度。如果您希望渐变向下延伸内容的高度，您可能不得不重新考虑布局。

【讨论】：

我会引用规范的相关部分来支持我在第二段中的陈述，但是我必须链接到几个地方，这会使这个答案变得很长。不知道我是否应该把它们放进去。
您可以使用 JavaScript 来确定内容区域的高度以设置适当的样式，but apparently there are cross-browser issues with that，您甚至可能无法始终获得精确的值。就个人而言，我认为这不值得麻烦。
感谢@BoltClock！这很有意义，有助于告诉我我遇到的其他问题（即最后一个 div 的渲染溢出了背景图像的边界......）