12

サンプル CSS:

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: linear-gradient(90deg, #e8f0ff, #ffffff);

#e8f0ffこれにより、下から上に向かう線形グラデーションが発生してい#fffました。

Firefox 16 以降 (数日前にリリース) では、グラデーションが#e8f0ff左から#fff右に移動するようになりました。

ベンダー固有の CSS を削除してそのままにしておくと、次のようになります。

background-image: linear-gradient(90deg, #e8f0ff, #ffffff);

何も起こりません。しかし、その行を削除して、ベンダー固有のスタイルだけを残すと:

background-image: -moz-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -ms-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -o-linear-gradient(90deg, #e8f0ff, #ffffff);
background-image: -webkit-linear-gradient(90deg, #e8f0ff, #ffffff);

問題を修正します。

では、FF16 の新機能であるここで何が起こっているのでしょうか? 価値観は新しい方向から始まっていますかXdeg、特定の状況でのみ追加されていますか? ベンダーのみの場合180degのみ、両方または一般のみで機能する理由がわかりません。90deg

問題は、Firefox のこの新しい動作の詳細と、FF16 でグラデーションが間違った方向に進んでいる Web サイトに対する最も広範で最も標準に準拠したソリューションは何かということです。

4

2 に答える 2

13

標準では、角度は 0° = 上向きから時計回りに測定されることが規定されています。

角度の使用

この引数の目的のために、「0deg」は上向きを指し、正の角度は時計回りの回転を表すため、「90deg」は右向きを指します[sic]。

-moz-linear-gradient一方、極座標を使用します（強調鉱山）：

接頭辞付きのバリアントと接頭辞なしの提案の間には、最後の意味的な好奇心が依然として存在します。最初の Apple の提案に従い、接頭辞付きの構文のバリアントはすべて<angle>極角のように定義された an を使用します。つまり、0deg は東を表します。CSS の残りの部分と一貫性を持たせるために、仕様では北を表す 0deg の角度を定義しています。接頭辞付きのプロパティを使用するサイトが突然破損するのを防ぐために、前方互換性のある最終的な構文に適応する場合でも、サイトは元の角度定義 (0deg = East) を保持します。プロパティの接頭辞を外すと、正しい仕様に切り替わります。また、互換性がないわけではないので、Gecko は接頭辞付きで、to キーワードのある構文とない構文の両方をサポートしています。ここでも、キーワードのない構文は、プレフィックスを外すときに削除されます。

于 2012-10-13T00:10:09.953 に答える
0

簡単なハックはbottom、学位の代わりにキーワードを使用することです。

于 2012-10-18T00:01:33.700 に答える