CSS 在 Chrome 和 IE 8 中的工作方式不同答案

【问题标题】：CSS Working Different in Chrome and IE 8CSS 在 Chrome 和 IE 8 中的工作方式不同
【发布时间】：2013-11-05 23:24:13
【问题描述】：

我有这个在 Chrome 中运行良好的 CSS 类，但在 IE 8（是的，我的工作仍然使用 IE 8）中，背景图像没有显示。我在想 IE 8 可能不知道如何处理 CSS 的某些部分，但无法确定它。

这是 CSS 类

ul.action:not(.btnImage) li a:not(.btnImage), ul.groupAction:not(.btnImage) li a:not(.btnImage),  ul.actionGradient:not(.btnImage) li a:not(.btnImage){
background-color: transparent !important;
background: url("../images/buttons/btnShineBackground.png") top left repeat-x !important;
border-width: 0px 1px !important;
border-color: #f47a2a !important;
border-style: ridge !important;
padding: 0px !important;
color: #FFF !important;
width: 120px !important;
height: 29px !important;
text-align: center !important;
vertical-align: middle !important;
line-height: 29px !important;
font-size: 10px !important;
font-weight: lighter !important;
font-family: Arial Black !important;
font-style: normal !important;
text-transform: uppercase !important;

这里是 HTML

<ul class=" action"><li><a href="javascript:void(0);" onmousemove="window.status='';"     onmouseout="window.status='';" id="r898BB6A34E694110894F489DA4BEA3BB1DE_3" onfocus="storeFocusField(this);" onclick="customOnClick(this);submitAjax(this,'PageContainer','a_r898BB6A34E694110894F489DA4BEA3BB1DE_3','0','','','','N','',null,'');">Continue</a></li></ul>

【问题讨论】：

:not() 选择器仅适用于 IE9+。
与问题无关，但如果您像这样使用!important，那么您几乎可以肯定做错了什么。 !important 只能作为最后的手段使用。几乎总有更好的选择。

标签： html css internet-explorer google-chrome

【解决方案1】：

IE8 不支持那些 CSS 选择器。但是你把事情复杂化了。

使用多个选择器会更简单，您不需要使用不受支持的伪类

UL.action{
  background: url("../images/buttons/btnShineBackground.png") top left repeat-x;
}
UL.action.btnImage{
  background: none:
}

【讨论】：

【解决方案2】：

非常简单：您在选择器中使用了 IE8 不支持的 CSS 功能。

IE8 不支持 CSS :not()。因此，您的选择器将不起作用。因此，不会看到该选择器中的任何 CSS。

您的选择是：

重写您的 CSS，以便仅使用您想要支持的浏览器中可用的功能。
继续使用这些功能，停止支持 IE8。
使用像 Selectivizr 这样的 polyfill 脚本来帮助 IE8 理解那些 CSS 选择器。

【讨论】：

【解决方案3】：

IE8 不支持该伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:not

【讨论】：

【解决方案4】：

IE8 不支持 CSS3 选择器（例如 :not）

参考：http://caniuse.com/#feat=css-sel3

【讨论】：