Css 线性渐变在 mozilla firefox 中无法正常工作

Question

我在 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

Answer 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>