如何在 jQuery.css() 方法中为所有浏览器编写 CSS？

Question

我正在添加一个需要多浏览器 CSS 的动态渐变；如果针对一个浏览器它可以工作，甚至如果写在 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 找到实时代码。 编辑：通过从 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'
            });

Answer 1

请参见此处：http://blog.jquery.com/2012/08/09/jquery-1-8-released/ 您只需使用 linear-gradient，jQuery 将自动填充其余部分。

不要忘记安装 CSS Pie 以在旧版 IE 中支持渐变。

然而，这确实引发了 jQuery 中 css-pie polyfill 的问题......