Linear-Gradienten Artefakte in Firefox

Ich habe Problem mit linear-Gradienten in Firefox 16. firefox linear-gradient artifact Linear-Gradienten Artefakte in Firefox

On Screen schlecht sichtbar ist (schlecht - Lichtlinie am unteren Rand des Blocks).

Code:

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

Und CSS Teil:

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 line-height-Eigenschaft auf den Screenshot geändert haben.

Kann jemand beschreiben, was es Linie ist und wie man es versteckt ?!

Vielen Dank. Entschuldigung für mein Englisch.

Quelle

2012-11-01 Umnyjcom

können Sie eine Geige machen? wie aktuelle Stile gegeben sind, sehe ich nichts wie das –

Getestet in FF16 und funktioniert wie erwartet. Wenn Sie den Zeilenhöhenwert angeben, wenn das Problem auftritt, können wir den Fehler möglicherweise verfolgen. Ich vermute, dass dies auf das Seitenverhältnis zurückzuführen ist, wenn das Problem überhaupt auftritt.

Es ist kein Fehler, sondern auch für Konsistenz versuchen Prozentsatz oder Wert auf Gradientenlinien zu verwenden:

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

Hier ist die Arbeits Geige: http://jsfiddle.net/FVcdu/1/

Quelle

2012-11-01 07:45:45

Danke! Ich habe dieses Element mit Ausnahme der anderen überprüft und es funktioniert gut. Ich habe angefangen, in anderen Elementen nach Problem zu suchen, und ich habe es getan. Problem ist "line-height: 1" in div-Element über der Verbindung. – Umnyjcom

ich auch über diese seltsamen Fehler in Firefox gestolpert. Es dauerte eine Weile, aber ich beschränkte mich darauf, eine Erklärung zu sein, die im CSS fehlte.

Wenn Sie Gradienten verwenden, sollten Sie versuchen, alle verschiedenen Browserstandards zu verwenden, damit Ihre Farbverläufe in allen Browsern so gut wie möglich aussehen. Ich kann empfehlen, Ultimate CSS Gradient Generator zu verwenden, die Ihnen css delcerations für alle möglichen Browser zur Verfügung stellt.

Die eine Erklärung für mich fehlt, und das löste es am Ende, war die W3C-Standard: Linnear-Gradienten().

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

So fügen hinzu, dass möglich in Ihrem Code Ihr Problem mit der Boden 1px Zeile in Steigungen lösen könnte wie es für mich so tat.

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

Quelle

2012-11-07 15:50:04 Donpa

Antwort

Verwandte Themen