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可能已经在努力使事情变得正确）

Answer 2

从您的代码中删除!important。 !important只应在样式表中使用，而不能在内联属性中使用。

Answer 3

在IE中，它很适合使用

element.css('property', 'value')

虽然你需要为每个属性单独一行。

注意：您可以使用

轻松指定重要内容

$.('#elid').css('display', 'block !important')

jQuery .css（）在IE 6,7,8和Firefox中不起作用，但适用于Chrome，Safari，Opera

3 个答案: