为什么我的div不能在IE中更改颜色？

Question

以下情况在IE中不起作用。

样式：

.tabmenu {
    background-color: #990000;
    display: inline-block;
    width: 150px;
    position: relative;
    left: 59%;
    border-top-left-radius: 10em;
    margin-bottom: -8px;
    min-width: 75px;
    max-width: 150px;           
    font-size: 13px;
    font-weight: bold;
    font-style: normal;
    font-family: Arial;
    border: none;
    padding: 5px 5px;
    height: auto !important;
    cursor: pointer !important;
    color: #ffffff !important;
    text-align: center;
}

在.cshtml文件中

<div class="tabmenu" style="width:100px;" onclick="btnCommonOnClick()" id="btnCommon">Common</div>
<div class="tabmenu" style="background-color:#999999!important;"  onclick="EquipmentSpecificOnClick(1)" id="btnEquipment">Specific</div>   
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick=" btnUnassignedonClick(this)" id="btnUnassigned">Unassigned</div>
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

首先加载背景色看起来不错。 当我单击任何其他div时，请更改该div的背景颜色。 为此，我给出了代码：

$("#btnCommon").css("background-color","#999999 !important");//grey
$("#btnEquipment").css("background-color","#999999 !important");//grey
$('#btnOrphan').css("backgroundColor","#999999!important");//grey
$('#btnUnassigned').css("backgroundColor","#990000!important");//red

上面的代码在IE中不起作用。 div颜色不会更改为红色。 仍然是灰色的。

有什么办法吗？

Answer 1

可以使用IE Edge进行确认，其内联background-color:#999999!important的CSS不会被覆盖。

如果删除!important声明，它将正常工作。

我添加到html页面：

<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

并在开发者控制台中运行：

$('#btnOrphan').css("backgroundColor","#990000!important");

但是背景颜色没有改变。

将html更改为：

<div class="tabmenu" style="background-color:#999999;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

并运行：

$('#btnOrphan').css("backgroundColor","#990000");

背景颜色改变。

如果需要保留!important声明，则可以尝试定义两个CSS类：

.bg-gray {background-color:#999999 !important;}
.bg-red{background-color:#990000 !important;}

然后像这样标记您的HTML：

<div class="tabmenu bg-gray" style="width:100px;" onclick="OrphanOnClick()" id="btnOrphan">

并更改点击处理程序中的颜色：

$('#btnOrphan').removeClass("bg-gray").addClass("bg-red");