2

マルチブラウザー CSS を必要とする動的グラデーションを追加しています。1 つのブラウザーで指示された場合は機能し、CSS ファイルに記述されている場合でも機能しますが、jquery で .css() メソッドを使用すると、バックグラウンドの読み込みに失敗します。ここで何をしようとしているのかを理解するために、すべてのブラウザー CSS を追加したときに機能しないコードの例を示します ...

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
            $jj('.fixedElement').css({
                'position': 'fixed', 'top': '0px', 'z-index': '9999',
                'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
                'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'background': '#00172A',
                'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-webkit-gradient(linear, left top, left bottom, color-stop(80%,#00172A), color-stop(100%,#2F71B3))',
                'background': '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#00172A\', endColorstr=\'#2F71B3\',GradientType=0 )',
                'background': 'linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'color': '#ffffff'
            });

単一の「バックグラウンド」呼び出しを使用している間、選択したブラウザーで機能します。たとえば、これは firefox で機能します...

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
            $jj('.fixedElement').css({
                'position': 'fixed', 'top': '0px', 'z-index': '9999',
                'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
                'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'color': '#ffffff'
            });

コードはhttp://www.thediabetesnetwork.comで公開されています。 EDIT : json オブジェクトから css を削除し、jquery API を使用して修正しました。呼び出しが json 括弧で囲まれ、json 構文を使用する方法に注意してください..それが問題でした。今、それはこのように見えます。

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
            $jj('.fixedElement').css('background', 'linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-webkit-gradient(linear, left top, left bottom, color-stop(80% #00172A), color-stop(100%,#2F71B3))');
            $jj('.fixedElement').css(
                {
                'position': 'fixed',
                'top': '0',
                'z-index': '9999',
                'width': '120%',
                'paddingRight': '20%',
                'paddingLeft': '20%',
                'marginLeft': '-10%',
                'left': '0',
                'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'paddingTop': '0',
                'paddingBottom': '0',
                'color': '#ffffff'
            });
4

1 に答える 1

3

ここを参照してください: http://blog.jquery.com/2012/08/09/jquery-1-8-released/を使用するlinear-gradientだけで、残りは jQuery によって自動的にポリフィルされます。

古い IE でグラデーションをサポートするためにCSS Pieをインストールすることを忘れないでください。

しかし、それは jQuery の css-pie ポリフィルの問題を提起します....

于 2012-08-23T23:21:54.133 に答える