Линейные градиенты артефактов в Mozilla Firefox

у меня проблема с линейным градиентом в 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;
}

Я изменил выше на скриншоте .

может ли кто-нибудь описать, что это за линия и как ее скрыть?!

спасибо. Извините за мой английский.

7
css3 firefox html linear-gradients

2 ответов

протестировано в FF16 и работает, как ожидалось. Возможно, если вы предоставите значение высоты линии, когда проблема появляется, мы можем отслеживать ошибку. Я подозреваю, что это связано с соотношением сторон, если проблема вообще происходит.

это не недостаток, но для согласованности попробуйте использовать процент или значения на градиентных линиях:

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

вот рабочая скрипка:http://jsfiddle.net/FVcdu/1/

2

Я также наткнулся на эту странную ошибку в Firefox. Это заняло некоторое время, но я сузил его до объявления, отсутствующего в css.

когда вы делаете градиенты, вы должны попробовать и иметь все различные стандарты браузера, чтобы ваши градиенты выглядели как можно лучше во всех браузерах. Я рекомендую использовать окончательный CSS градиент генератор который предоставит вам CSS delcerations для всех возможных браузеров.

одно объявление скучаю по себе, и это решило его в конце концов, было стандарт W3C: linnear-градиент().

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

таким образом, добавив, что в вашем коде можно решить проблему с нижняя строка 1px в ваших градиентах как это произошло со мной.

окончательный генератор градиента CSS: http://www.colorzilla.com/gradient-editor/

1