0

下面是我的 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在开发者工具中可以看到属性本身并没有被采用。

开发者工具 标签

4

1 回答 1

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;
于 2013-05-17T13:03:26.980 回答