Css 线性渐变在 Mozilla Firefox 中未按预期工作答案

【问题标题】：Css linear gradient not working as expected in mozilla firefoxCss 线性渐变在 Mozilla Firefox 中未按预期工作
【发布时间】：2017-06-09 19:27:50
【问题描述】：

我在 Mozilla Firefox 中遇到线性渐变问题。以下css代码：

background: linear-gradient(180deg, black 20%, darkorange);

html {
  height:100vh;/* demo purpose*/
  background: linear-gradient(180deg, black 20%, darkorange);
}

对于所有浏览器都能产生从黑色到橙色平滑转换的漂亮背景。但是它在 Firefox 中不起作用。它一个接一个地产生许多细细的橙色和黑色线条。但是，当我将第一个参数更改为 90deg（水平渐变）时，它会按预期工作。我做错了什么？我已经从 stackoverflow 中阅读了关于这个问题的类似问题，但没有解决方案对我有用。是的，我尝试更改为 -moz-linear-gradient，但它也不起作用（我使用的是最新版本的 FF 浏览器，所以无论如何它不应该是一个因素。

提前感谢您的帮助。

JS-fiddle link (not much to fiddle there though):

嗯，我在这里用 GCyrillus 添加的代码进行了测试，它工作正常。但是，当我在浏览器或 JS Fiddle 中对其进行测试时，它仍然会产生奇怪的结果，如下图所示： Imgur

【问题讨论】：

win7上最新的chrome & ff，结果差不多，没有错。您使用什么操作系统进行测试？
我使用的是 Windows 10。
容器元素的高度是多少？
这里是codepen.io/anon/pen/gRPdyB 的最小演示，如果你想玩并查看它。（你在 FF 中调整了硬件设置吗？）
嗯，抱歉，但我不明白 - 我应该如何在 FF 中调整我的硬件设置？

标签： css firefox linear-gradients

【解决方案1】：

您需要确保要设置背景的元素具有高度，无论是明确设置还是由于内容。

.test {
  width: 100px;
  background: linear-gradient(180deg, black 20%, darkorange);
  float: left;
}
#test1 {
  height:200px;
}

<div class="test" id="test1">Test</div>
<div class="test">Test</div>

【讨论】：