Question

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

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

Code:

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

And CSS part:

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;
}

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.

Answer 1

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%);

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