CSS：菜单链接的背景图像在 IE 8 中不可见答案

【问题标题】：CSS: Background Image for Menu Link isn't Visible in IE 8CSS：菜单链接的背景图像在 IE 8 中不可见
【发布时间】：2011-07-21 03:12:42
【问题描述】：

我正在开发的网站有一个菜单，其中包含一个徽标图像作为最后一个链接的背景。由于某种原因，该图像不会出现在 IE 中，即使它在所有其他浏览器中都可以正常显示。

这里是网站：

http://www.cybart.com/bscg/

如果有人可以查看我的 CSS 并推荐 Internet Explorer 版本，我将不胜感激：

 #access {
    left:70%;
    top:140px;
    margin-left:-600px;
        width: 280px;
    z-index:999;
    position:relative;
    float:left;"
    }

#access ul {
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul,
#access ul ul {
list-style-type:none;
width: 250px;
}

#access ul ul {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
display:none;
}


#access ul li:hover > ul {
    display: block;
}


#access ul li:last-child {
height:77px;
background: url(images/aba/ABALinkRed.jpg) no-repeat top left;
text-indent: -3000px;
-moz-box-shadow: 0 0 5px -1px #888;
-webkit-box-shadow: 0 0 5px -1px #888;
box-shadow: 0 0 5px -1px #888;
}

#access ul li:last-child a {
background:transparent;
height:77px;
}

#access ul ul li:last-child {
background:transparent;
height:32px;
text-indent: 0px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#access ul ul li:last-child a {
background:#fff;
background: rgba(255, 255, 255, 0.85);
height:18px;
}


#access ul a,
#access ul ul a {
display:block;
padding: 7px 0 7px 10px;
background:#fff;
background: rgba(255, 255, 255, 0.85);
text-decoration:none;
color:black;

} 


#access ul ul {
padding-left:40px;
margin-left:-20px;
}

#access ul ul a {
margin-left: -20px;
padding-left:20px;
width:230px;
}


#access ul a:hover,
#access ul ul a:hover {
color: #CA0000;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #CA0000;
}

【问题讨论】：

标签： css internet-explorer background

【解决方案1】：

它适用于 IE9，所以我假设您使用的是 IE8。

这是您添加图像的方式：

#access ul li:last-child {
    background: url(images/aba/ABALinkRed.jpg) no-repeat top left;
}

它不起作用的原因是 IE 直到版本 9 才支持 :last-child，请参阅：http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#pseudoclasses

【讨论】：

谢谢你，ThirtyDot。假设我将 .aba_logo 类分配给相关链接。你能告诉我如何让它工作吗？
然后你使用.aba_logo 声明而不是#access ul ul li:last-child 声明。
这正是我的问题。当我这样做时，背景图像不会以应有的方式出现。您能看看更新后的网站吗？
@Dimitri Vorontzov：目前网站的版本仍在使用#access ul li:last-child。将其更改为 .aba_logo。
我一分钟前就做过了，你能再看看吗？我只看到图片的底部，无法点击。