0

このスクリプトを FireFox で動作させようとしていますが、Chrome でのみ動作するようです。webkitのせいかと思い標準グラデーションに変換してみましたが、全然だめでした。スクリプトの何が問題になっていますか?

ウェブキット:

var grad = '-webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(1, #' + color + '))';

標準：

var grad = 'linear-gradient(to left, color-stop(0, #' + color + '), color-stop(1, transparent))';

ライブ スクリプト: http://jsfiddle.net/LThhd/12/

4

3 に答える 3

1

-mozFirefox で機能させるには、プレフィックスを使用する必要があります。完全なブラウザー互換性のために、次のすべての CSS ルールが推奨されます (明らかに、必要に応じて色を置き換えます)。

background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image:    -moz-linear-gradient(top, #444444, #999999);
background-image:      -o-linear-gradient(top, #444444, #999999);
background-image:         linear-gradient(to bottom, #444444, #999999);

順番に、これらは次のブラウザーをターゲットにしています。

  1. グラデーションをサポートしていない古いブラウザー
  2. Safari 4.*、5.0、および古いバージョンの Chrome
  3. Chrome 10 以降、Safari 5.1 以降、iOS 5 以降
  4. Firefox 3.6-15
  5. オペラ 11.10-12.00
  6. Firefox 16 以降、IE10、Opera 12.50 以降

(ソース: http://css3please.com )

于 2012-10-15T14:45:16.850 に答える
1

-moz-linear-gradient は、Firefox のグラデーションの正しい名前です

CSS グラデーション作成に便利なツール: http://www.colorzilla.com/gradient-editor/

于 2012-10-15T14:11:13.233 に答える
0

-moz-プレフィックスを使用する必要はありません.... http://webdesignerwall.com/tutorials/cross-browser-css-gradient

于 2012-10-15T14:10:36.133 に答える