为什么我的 div 在 IE 中没有改变颜色？答案

【问题标题】：Why isn't my div changing color in IE?为什么我的 div 在 IE 中没有改变颜色？
【发布时间】：2017-07-04 04:16:40
【问题描述】：

以下场景在 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 颜色不会更改为红色。仍然是灰色的。

有什么办法吗？

【问题讨论】：

您使用的是 Html5 吗？你检查的是哪个 IE 版本？stackoverflow.com/a/13439843/4248328
是.. Html 5, IE 11
$('#btnOrphan').css("backgroundColor","#999999!important"); 必须工作。奇怪的是它不起作用。为其他人尝试一次$("#btnCommon").css({'background-color':'#999999 !important'}); 等等（通过注释掉其他人先尝试一个）
最后一行代码 $('#btnUnassigned').css("backgroundColor","#990000!important");//red 不起作用..这就是问题
你永远不应该使用!important。这个标志会导致更多的问题然后它解决。只有在极少数情况下它可能有用（例如，如果您需要在无法控制所有 css 代码的外部网页上创建小部件），即使那样您也不应该使用它们。改为使用更具体的 css 规则和正确的 css 规则顺序。

标签： javascript jquery css html internet-explorer

【解决方案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");

【讨论】：

总结：不要使用style= 或.css('syle',value) - 始终使用类。