線形勾配アーティファクトは

Question

Iは、Mozilla Firefoxの悪いことが表示されているscreenshow 16.

線形勾配に問題があります。

コード：

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

私はスクリーンショットの行の高さプロパティを変更しました。

誰もそれが何であるか、どのようにそれを隠すことができるのか説明できますか？

ありがとうございます。私の英語には申し訳ありません。

Answer 1

FF16でテストされ、期待どおりに動作します。問題が発生したときに行の高さの値を指定すると、エラーを追跡できます。私は、問題が全く起こっていない場合、アスペクト比が原因であると考えています。

それは欠陥ではないですが、一貫性のための勾配ライン上のパーセンテージまたは値を使用するようにしてください：ここで

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

は作業フィドルです：http://jsfiddle.net/FVcdu/1/

Answer 2

私もFirefoxでこの奇妙なバグに出くわし。それはしばらくかかったが、私はそれをCSSから逃した宣言に絞った。

グラデーションを作成するときは、すべてのブラウザでグラデーションができるだけよく見えるように、すべてのブラウザ標準を試してみる必要があります。私はUltimate CSS Gradient Generatorを使用することをお勧めします。これは可能なすべてのブラウザに対してCSSを提供します。 linnear勾配（）：

私ため欠落1つの宣言は、それが最終的にそれを解決し、W3C標準でした。

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

だから、それは私のためにそうしたとして、あなたのコード内で可能あなたのグラデーションに底1pxのラインを使用して問題を解決できると付け加えました。

究極のCSSグラデーションジェネレーター： http://www.colorzilla.com/gradient-editor/