背景颜色在IE7中不起作用

Question

以下是我的HTML代码

<UL>
  <LI>
  <LI>
   ..
  <LI>
    <a class="upload_menu" href="someLink" ><span>Your Recipes</span></a>
  </LI> 
  <LI>
</UL>

以下是CSS类

.ie7 #navigation .upload_menu {
    background-color: #bb3f3f;
    color: #FFF;
    float: left;
    font-size: 12px;
    font-weight: bold;
        padding: 9px 4px 10px 6px;
    text-decoration: none;
        !background:  url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
        border-right: 1px solid #BCDAEE;

}


.ie7 #navigation .upload_menu:hover {
background-color: #bb3f3f;
}

还尝试了以下CSS

*:first-child +html #navigation .upload_menu {
    background-color: #bb3f3f;
    color: #FFF;
    float: left;
    font-size: 12px;
    font-weight: bold;
        padding: 9px 4px 10px 6px;
    text-decoration: none;
        !background:  url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
        border-right: 1px solid #BCDAEE;

}

*:first-child +html #navigation .upload_menu:hover {
background-color: #bb3f3f;
}

但在开发人员工具中可以看到background-color attrtibute本身没有被采纳。

Answer 1

我认为这里的问题是hacky：

!background:  url(../../../static-files/images/common/nav-divider.gif) no-repeat right;

它似乎覆盖了您的background-color属性（通过“当前样式”列表中的background-image属性） - 除非您在其他位置给它background-image - 如果是该代码尚未提供。

您可以做的是为该声明添加颜色：

!background:#bb3f3f url(../../../static-files/images/common/nav-divider.gif) no-repeat right;

或者将这些背景部分稍微分开以防止它覆盖background-color属性：

!background-image:url(../../../static-files/images/common/nav-divider.gif);
!background-repeat:no-repeat;
!background-position-x:right;