Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/74.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html CSS在Chrome和IE 8中的工作方式不同_Html_Css_Internet Explorer_Google Chrome - Fatal编程技术网

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

Html CSS在Chrome和IE 8中的工作方式不同,html,css,internet-explorer,google-chrome,Html,Css,Internet Explorer,Google Chrome,我有一个CSS类,它在Chrome中运行良好,但在IE8中(是的,我的工作仍然使用IE8),背景图像没有显示出来。我认为IE8可能不知道如何处理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){ ba

我有一个CSS类,它在Chrome中运行良好,但在IE8中(是的,我的工作仍然使用IE8),背景图像没有显示出来。我认为IE8可能不知道如何处理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>

IE8不支持该伪类:

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

IE8不支持CSS
:not()
。因此,您的选择器将不起作用。因此,选择器中的CSS都不会被看到

你的选择是:

  • 重写CSS,以便只使用希望支持的浏览器中可用的功能

  • 继续使用这些功能,停止支持IE8

  • 使用polyfill脚本帮助IE8理解这些CSS选择器


  • IE8不支持CSS3选择器(例如
    :not


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

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

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

    :not()
    选择器仅在IE9+中工作。与问题无关,但如果您使用的是
    !重要信息
    如果是这样,那么你几乎肯定是做错了什么<代码>!重要信息只能作为最后手段使用。几乎总是有更好的选择。