javascript jQuery .css() 不适用于 IE 6,7,8 和 Firefox，但适用于 Chrome、Safari、Opera
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7620865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .css() not working in IE 6,7,8 and Firefox, but works in Chrome, Safari, Opera
提问by kfawcett
UPDATE: THIS HAS BEEN SOLVED.
更新：这已经解决了。
I'm trying to change the default style of an Assistly site through JavaScript, because the stylesheet is not editable by me. It's working fine in Chrome, Safari, Opera, and IE9; but not in IE 6,7,8 or any Firefox.
我正在尝试通过 JavaScript 更改 Assistly 站点的默认样式，因为我无法编辑样式表。它在 Chrome、Safari、Opera 和 IE9 中运行良好；但不适用于 IE 6、7、8 或任何 Firefox。
In the code below the first two lines that are setting an h2 and an image are working across all browsers, but the .css() lines are not. Why would .css() not work in certain browsers?
在下面的代码中，设置 h2 和图像的前两行适用于所有浏览器，但 .css() 行不是。为什么 .css() 在某些浏览器中不起作用？
Here is the code.
这是代码。
<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>
回答by Spudley
I will add to what others have said: I suspect the problem may be related to the !importantflag.
我将补充其他人所说的：我怀疑问题可能与!important标志有关。
The question is why do you need it? You're setting this on an inline style, so that ought to override any other styles anyway; the only thing that won't be overridden by default on an inline style is another style that is marked !important, so I assume that's what you're trying to do.
问题是你为什么需要它？您将其设置为内联样式，因此无论如何都应该覆盖任何其他样式；内联样式中唯一不会被默认覆盖的样式是另一种标记为 的样式!important，因此我认为这就是您要尝试执行的操作。
The trouble is that as soon as you use !important, you're basically telling the browser that this style should trump everything else; inheritance and precedence go out of the window.
问题在于，一旦您使用!important，您基本上是在告诉浏览器这种风格应该胜过其他一切；继承和优先级被排除在外。
If you have multiple !importantstyles on the same element, both will have equal precedence, so you can never really be sure what's going to happen. Some browsers will pick up one, some the other.
如果您!important在同一个元素上有多个样式，则两者将具有相同的优先级，因此您永远无法确定会发生什么。一些浏览器会选择一个，另一些。
The real lesson to be taken from this is to avoid using !importantin your stylesheets, unless it is absolutely unavoidable, and certainly avoid it for anything that you will subsequently want to override.
从中吸取的真正教训是避免!important在样式表中使用，除非它绝对不可避免，并且当然要避免在以后想要覆盖的任何内容中使用它。
Due to the way CSS arranges things in order of precedence and inheritance, there are in fact very very few cases where !importantis actually needed. There is almost always an alternative (better) way of doing it.
由于 CSS 按优先级和继承的顺序排列事物的方式，实际上很少!important有真正需要的情况。几乎总有一种替代的（更好的）方法可以做到这一点。
So the short answer: Re-work your stylesheets to get rid of the !importantmarkers. Your jQuery code is not going to work correctly until you do this (and in fact, looking at the number of !importantmarkers in your site, your CSS on its own might already be struggling to get things right as it is)
所以简短的回答：重新设计你的样式表以摆脱!important标记。除非您这样做，否则您的 jQuery 代码将无法正常工作（事实上，查看!important您网站中的标记数量，您的 CSS 本身可能已经在努力使事情变得正确）
回答by Rob W
Remove !importantfrom the your code. !importantshould only be used within stylesheets, not within inline attributes.
!important从您的代码中删除。!important应该只在样式表中使用，而不是在内联属性中使用。
回答by yoozer8
In IE, it works well to use
在 IE 中，使用效果很好
element.css('property', 'value')
Although you then need a separate line for every property.
尽管您需要为每个属性单独一行。
Note: you can specify important easily with
注意：您可以使用
$.('#elid').css('display', 'block !important')
