Question

CSS菜单栏 IE6IE7IE8不兼容，IE9IE10IE11都可正常显示

如图：正常显示效果为第一图，IE9IE10IE11正常；IE8及以下版本显示不正常，变成白底，如图2。 该如何处理这个兼容问题？

.sf-menu a {
text-decoration:none;
display: block;
position: relative;
padding: 15px 25px;
text-decoration:none;
font-weight:normal;
text-transform:uppercase;
color:#fff;
font-weight: 400; font-family: 'Open Sans', sans-serif;
}

.sf-menu > li {

position: relative;
z-index: 10;
border-right: 1px solid #1c1c1c;
}

.sf-menu > li:before {
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
border-right: 1px solid #383838;
}

.sf-menu a:hover, .sf-menu li a.current{color:#fff; background:#88c726;}

/* Drop down menu */
.sf-menu ul a:hover {}
.sf-menu li li {
text-align:left;
line-height:20px;
margin:0;
}
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;

}
.sf-menu {
line-height:100%;
position:absolute;
right:0;
bottom:0;
float:left;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 14em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
margin:0;
}

.sf-menu li li{margin:0px 0px;}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0px;
top: 3.6em; /* match top ul list item height */
z-index: 99;

}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 14em; /* match ul width */
top: -1px;
margin-left: 0px;
}





Answer 1

li:hover .sf-menu > li:before 这种伪类和后代选择器IE8以下不支持，只支持a:hover
.sf-menu li
不要用>这样的选择器就行了

追问

这行代码：#headerbox{width:100%; margin:0px auto; padding:0px 0px; background:url(../images/aboutus_01.gif) repeat top;}
IE9IE10IE11能显示背景图片，IE8及以前不显示背景图片。咋修改呢?

追答

我觉得是因为没有设置高度的原因，其它的看不出来了，因为只有这段代码不好分析

Answer 2

改用背景图片吧

追问

对，其实是一个背景图片IE9以上能显示，IE8以下不能显示。该怎么解决呢?

这行代码：#headerbox{width:100%; margin:0px auto; padding:0px 0px; background:url(../images/aboutus_01.gif) repeat top;}