Firefox 的线性渐变不好看答案

【问题标题】：Bad looking linear gradient at FirefoxFirefox 的线性渐变不好看
【发布时间】：2013-11-27 00:03:41
【问题描述】：

我正在给我一个线性渐变，但在 Firefox 中，即使是新版本，我得到的只是构建渐变的纯色条。这是我的 CSS 中的内容：

 background-color: #d3d3d3;
 background-repeat: repeat-x;
 background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
 background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
 background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));

【问题讨论】：

你是什么意思是像纯色条建立渐变？
完美运行jsfiddle.net/acyNw/66
看起来像这样：d.pr/i/1fVU
检查你的火狐版本或屏幕分辨率，可能是你没有安装显示驱动！
好吧，不是我，客户的电脑会显示这样的东西，而我的跨浏览器测试软件（browserstack）也是这样......

标签： css firefox cross-browser

【解决方案1】：

根据this，您不太可能遇到版本问题。像往常一样，Firefox 是第一个实现符合标准（无前缀）的 CSS 属性的（并且它已经有 9 个版本了）。

尝试删除background-repeat 属性，因为除非您设置了background size，否则它对渐变几乎没有用处。如果解决了，我建议在Bugzilla 上发布错误报告。它在 IE10 和 Chrome 上运行良好吗？

【讨论】：

是的，在 IE10（和几个旧版本）和我测试的所有 Chrome 版本中都可以正常工作。不知道该代码有什么问题...
尝试删除linear-gradient 中的百分比标记。这将意味着“0% 时较暗，100% 时较亮”，这与您指定的非常接近。
我尝试了你写的所有东西，我的身体看起来像这样：body { /* fallback */ width: 100%;高度：100%；背景颜色：#d3d3d3；背景：-moz-线性梯度（顶部，rgba（168,168,168,1）0％，rgba（255,255,255,1）100％）；背景：-webkit-gradient（线性，左上，左下，从（#d3d3d3），到（#fcfcfc））；过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#fcfcfc');背景：-o-线性梯度（rgb（211,211,211），rgb（253,253,253））；字体系列：'EB Garamond'，衬线；背景附件：固定； } 仍然有问题...
您使用的是哪个 Firefox 版本？