Mozilla Firefox 中的线性渐变工件答案

【问题标题】：Linear-gradients artifacts in Mozilla FirefoxMozilla Firefox 中的线性渐变工件
【发布时间】：2012-10-21 18:29:18
【问题描述】：

我在 Mozilla Firefox 16 中遇到线性渐变问题。

在屏幕上可以看到坏的东西（坏 - 块底部的灯线）。

代码：

<a href="#">Button Text</a>

还有 CSS 部分：

a {
    background: -moz-linear-gradient(center top , #88EB52, #3CA82D);
    border: 1px solid #399A29;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 54px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
    width: 376px;
}

我已经更改了屏幕截图上的 line-height 属性。

谁能描述它是什么线以及如何隐藏它？！

谢谢。对不起我的英语。

【问题讨论】：

你能做个小提琴吗？由于给出了当前样式，我没有看到类似的东西

标签： html firefox css linear-gradients

【解决方案1】：

在 FF16 中测试并按预期工作。也许如果您在问题出现时提供行高值，我们可以跟踪错误。我怀疑这是由于纵横比造成的，如果问题真的发生的话。

这不是一个缺陷，但为了保持一致性，请尝试在渐变线上使用百分比或值：

background: -moz-linear-gradient(center top, #88EB52 0%, #223312 100%);

这是工作小提琴：http://jsfiddle.net/FVcdu/1/

【讨论】：

谢谢！我已经检查了这个元素，不包括其他元素，效果很好。我已经开始在其他元素中寻找问题并且我做到了。问题是链接上方 div 元素中的“line-height:1”。

【解决方案2】：

我还在 Firefox 中偶然发现了这个奇怪的错误。花了一段时间，但我将其缩小为css中缺少的声明。

当您进行渐变时，您应该尝试在其中使用所有不同的浏览器标准，以便您的渐变在所有浏览器中看起来都尽可能好。我可以推荐使用Ultimate CSS Gradient Generator，它将为您提供所有可能的浏览器的 css delcerations。

我缺少的一个声明，最终解决了这个问题，那就是 W3C 标准：linnear-gradient()。

background: linear-gradient(to bottom,  #CCCCCC 0%,#EEEEEE 100%);

因此，在您的代码中添加它可能会解决您的问题，渐变中的底部 1px 行就像它为我所做的那样。

终极 CSS 渐变生成器： http://www.colorzilla.com/gradient-editor/

【讨论】：