7

Mozilla Firefox 16 の線形グラデーションに問題があります。 firefox 線形グラデーション アーティファクト

スクリーン ショーで悪いことが表示されます (悪い - ブロックの下部にある薄い線)。

コード：

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

スクリーンショットの line-height プロパティを変更しました。

誰かがそれが何であるか、そしてそれを隠す方法を説明できますか?!

ありがとうございました。私の英語でごめんなさい。

4

2 に答える 2

2

FF16でテストされ、期待どおりに機能しています。問題が発生しているときに行の高さの値を指定すると、エラーを追跡できる可能性があります。問題が発生している場合、これはアスペクト比によるものと思われます。

これは欠陥ではありませんが、一貫性を保つために、グラデーションの線にパーセンテージまたは値を使用してみてください。

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

これが実用的なフィドルです：http：//jsfiddle.net/FVcdu/1/

于 2012-11-01T07:45:45.603 に答える
1

また、Firefox でこの奇妙なバグに出くわしました。しばらく時間がかかりましたが、css から欠落している宣言に絞り込みました。

グラデーションを作成するときは、すべてのブラウザーでグラデーションが可能な限り見栄えがするように、さまざまなブラウザー標準を試してみてください。可能なすべてのブラウザーに CSS の decerations を提供するUltimate CSS Gradient Generatorを使用することをお勧めします。

私にとって欠けていた 1 つの宣言であり、最終的にそれを解決したのは、W3C 標準である linnear-gradient()でした。

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

したがって、コードにそれを追加すると、グラデーションの一番下の 1px 行で問題が解決する可能性があります。

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

于 2012-11-07T15:50:04.067 に答える