liniowy gradienty artefaktów Firefoksie

Question

że występuje problem z liniowym gradientem w Firefoksie 16.

Na ScreenShow źle widoczny (zły - linia na spodzie bloku).

Kod:

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

i CSS część:

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

Zmieniłem właściwość line-height na zrzucie ekranu.

Czy ktoś może opisać, co to jest linia i jak to ukryć ?!

Dziękuję. Przepraszam za mój angielski.

Answer 1

Testowany w FF16 i działa zgodnie z oczekiwaniami. Może jeśli podasz wartość wysokości linii, gdy pojawi się problem, możemy śledzić błąd. Podejrzewam, że jest to spowodowane proporcjami, jeśli problem w ogóle się dzieje.

Nie jest to wada, ale dla spójności spróbować użyć procent lub wartości na liniach gradient:

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

Oto skrzypce robocze: http://jsfiddle.net/FVcdu/1/

Answer 2

ja również natknęliśmy się na to nieparzystej błąd w Firefoksie. Zajęło to trochę czasu, ale zawęziłem go do bycia deklaracją brakującą w css.

Podczas wykonywania gradientów należy wypróbować wszystkie standardy przeglądarki, aby gradienty wyglądały tak dobrze, jak to możliwe we wszystkich przeglądarkach. Mogę polecić używanie Ultimate CSS Gradient Generator, która zapewni ci deledacje css dla wszystkich możliwych przeglądarek.

Ten brak zgłoszenia mi i że rozwiązanie to w końcu jest standardowym W3C: linnear gradiencie().

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

Więc dodając, że w kodzie mogłaby możliwe rozwiązać swój problem z linią 1px w swoim dolnym gradientów jak uczynił to dla mnie.

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