javascript - jQuery .css() 不适用于 IE 6、7、8 和 Firefox，但适用于 Chrome、Safari、Opera

Question

更新:这已经解决。

我正在尝试通过 JavaScript 更改 AssiSTLy 网站的默认样式，因为我无法编辑样式表。它在 Chrome、Safari、Opera 和 IE9 中运行良好；但不在 IE 6、7、8 或任何 Firefox 中。

在下面的代码中，设置 h2 和图像的前两行适用于所有浏览器，但 .css() 行不是。为什么 .css() 在某些浏览器中不起作用？

这是代码。

<script type="text/javascript">
jQuery(document).ready(function(){
$("#support-header .wrapper h2").first().html('<h2>Real Estate Help</h2>');
$("#company-header .wrapper").html('<a href="http://help.mysite.com/"><img src="http://www.mysite.com/logo-red.png" /></a>');
$("body").css({'background': '#FFFFFF !important'});
$("#company-header").css({'background': 'none !important'});
$("#support-header").css({'background': 'none !important', 'border-bottom': 'none', 'padding': '0'});
$("#company-support-portal").css({'background-image': 'url(http://www.mysite.com/container-bg2.jpg) !important', 'background-repeat': 'repeat-x', 'margin-top': '10px'});
});
</script>

Answer 1

我将补充其他人所说的内容:我怀疑问题可能与 !important 标志有关。

问题是你为什么需要它？您将其设置为内联样式，因此无论如何都应该覆盖任何其他样式；默认情况下，内联样式中唯一不会被覆盖的是另一种标记为 !important 的样式，所以我假设这就是您要尝试做的。

问题在于，一旦您使用 !important，您基本上就是在告诉浏览器这种样式应该胜过其他所有样式；继承和优先级不适用。

如果您在同一个元素上有多个 !important 样式，它们将具有相同的优先级，因此您永远无法真正确定会发生什么。有些浏览器会选择一个，有些会选择另一个。

真正的教训是避免在你的样式表中使用 !important ，除非它是绝对不可避免的，当然要避免它用于你随后想要覆盖的任何东西。

由于 CSS 按照优先级和继承顺序排列事物的方式，实际上很少有需要 !important 的情况。几乎总有一种替代(更好)的方法。

所以简短的回答是:重新处理您的样式表以摆脱 !important 标记。除非您这样做，否则您的 jQuery 代码将无法正常工作(事实上，查看您站点中 !important 标记的数量，您的 CSS 本身可能已经在努力使事情正确原样)