Question

我有以下HTML和CSS。 CSS在Firefox中工作正常，但在IE 9中没有应用颜色。我已经在xhtml文件中指定了doctype。我如何使它与IE9一起使用？

HTML：

<div id="j_idt19:j_idt20" class="ui-tabmenu ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
        <li class="ui-tabmenuitem ui-state-default ui-state-active ui-corner-top" aria-expanded="true" role="tab">
            <a id="j_idt19:homeTab" class="ui-menuitem-link ui-corner-all tabMenuDefaultCls" href="/XXX.xhtml?i=0" tabindex="-1">
                <span class="ui-menuitem-text"> … </span>
            </a>
        </li>
        <li class="ui-tabmenuitem ui-state-default ui-corner-top" aria-expanded="false" role="tab"> … </li>
        <li class="ui-tabmenuitem ui-state-default ui-corner-top" aria-expanded="false" role="tab"> … </li>
    </ul>

</div>

CSS：

.ui-state-active li {
    background-color: #F85A5A !important;
}


li[aria-expanded="false"] {
    background-color: #9975FC !important;
}

li[aria-expanded="true"] {
    background-color: #F85A5A !important;
}

.tabMenuDefaultCls {
    /* background-color: #9975FC; */
}

答案：

通过给css类提供更多优先级来解决问题，

li[aria-expanded="false"] a {
        background-color: #9975FC !important;
}

li[aria-expanded="true"] a {
        background-color: #F85A5A !important;
}

将标记添加到css类中以优先。

Answer 1

您是否在MetaTag代码后添加了<head>：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

希望它能解决你的问题。

Answer 2

也许suraj在这里给出的答案与您相关： Why IE doesn't support my CSS positioning

如果它让你振作起来，在IE11上运行正常......

http://jsfiddle.net/cg6jLnax/

CSS不使用IE 9

2 个答案: