Mozilla Firefox中的线性渐变工件 [英] Linear-gradients artifacts in Mozilla Firefox

问题描述

我在Mozilla Firefox 16中的线性渐变有问题。

I have problem with linear-gradient in Mozilla Firefox 16.

在屏幕上显示坏东西是可见的（错误 - 在底部的浅线）。

On screenshow bad thing is visible (bad - light line at the bottom of block).

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

I've changed line-height property on screenshot .

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

Can anyone describe what is it line and how to hide it?!

谢谢。对我的英语很抱歉。

Thank you. Sorry for my English.

推荐答案

在FF16测试并按预期工作。也许如果你提供行高度值，当问题出现我们可以跟踪错误。我怀疑这是由于长宽比，如果问题发生了。

Tested in FF16 and working as expected. Maybe if you provide the line height value when the issue is appearing we can track the error. I suspect this is due to aspect ratio, if the issue is happening at all.

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

It's not a flaw, but for consistency try to use percentage or values on gradient lines:

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

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

Here is the working fiddle: http://jsfiddle.net/FVcdu/1/

这篇关于Mozilla Firefox中的线性渐变工件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！