2012-11-01 3 views
7

ho problema con lineare-gradiente in Mozilla Firefox 16. firefox linear-gradient artifactlineare gradienti manufatti in Mozilla Firefox

Su screenshow cosa negativa è visibile (mala - linea luce nella parte inferiore del blocco).

Codice:

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

e CSS parte:

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

Ho cambiato proprietà line-height su screenshot.

Qualcuno può descrivere cos'è la linea e come nasconderlo ?!

Grazie. Mi scusi per il mio inglese.

+1

si può fare un violino? come vengono dati gli stili attuali, non vedo nulla del genere –

risposta

2

Testato in FF16 e funzionante come previsto. Forse se fornisci il valore di altezza della linea quando il problema è presente, possiamo tenere traccia dell'errore. Sospetto che ciò sia dovuto alle proporzioni, se il problema si sta verificando.

Non è un difetto, ma per la coerenza tenta di utilizzare percentuale o valori su linee sfumate:

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

Ecco il violino di lavoro: http://jsfiddle.net/FVcdu/1/

+0

Grazie! Ho controllato questo elemento escludendo gli altri e funziona bene. Ho iniziato a cercare problemi in altri elementi e l'ho fatto. Il problema è "line-height: 1" nell'elemento div sopra il link. – Umnyjcom

1

anche io siamo imbattuti in questo strano bug in Firefox. Ci è voluto un po 'di tempo ma l'ho ristretto ad essere una dichiarazione mancante dal css.

Quando si eseguono le sfumature, è necessario provare e disporre di tutti i diversi standard del browser in modo che le sfumature risultino migliori possibile in tutti i browser. Posso raccomandare usando Ultimate CSS Gradient Generator che fornirà le delezioni css per tutti i browser possibili.

Quella dichiarazione mancante per me, e che risolto, alla fine, era lo standard W3C: linnear-gradiente().

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

Quindi, aggiungendo che nel codice potrebbe possibile risolvere il problema con la linea di 1px fondo nelle vostre pendenze come lo ha fatto per me.

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