Question

我在Mozilla Firefox 16中遇到线性渐变问题。 firefox linear-gradient artifact

在屏幕上显示坏事是可见的（坏 - 块底部的灯线）。

代码：

<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属性。

任何人都可以描述它是什么线以及如何隐藏它？！

谢谢。抱歉我的英文。

Answer 1

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

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

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

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

Answer 2

我还偶然发现了Firefox中这个奇怪的错误。花了一段时间，但我把它缩小为css遗漏的声明。

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

我遗失的一个声明，最终解决了它，是 W3C标准：linnear-gradient（）。

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

因此，在您的代码中添加它可以解决您在渐变中的底部1px行的问题，因为它对我来说是这样。

Ultimate CSS Gradient Generator： http://www.colorzilla.com/gradient-editor/

Mozilla Firefox中的线性渐变瑕疵

2 个答案: