Question

我正在处理的网站有一个菜单，其中包含徽标图像作为最后一个链接的背景。出于某种原因，图像不会出现在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;
}

Answer 1

它适用于IE9，因此我假设你使用的是IE8。

这是您添加图片的方式：

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

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

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

1 个答案: