Question

我目前正在处理一个项目，我在下拉菜单中遇到问题，以及它在ie7和ie8中的显示方式。

您可以在此处查看：

这是我正在使用的CSS：

 nav {  width:1026px;
height: 50px;
background-image:url(../img/nav.png);
padding:0 0px 0 0px;
text-align:center;
margin-bottom:30px;

}

nav ul li  {
display:inline-block;
position:relative;

}

nav ul li div.sub {
display:none;
position:absolute;
background-color:#003e88;
top:38px;
width:260px;
text-align:left;
border-radius: 0px 0px 7px 7px;
-o-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;

}

nav ul li div.sub a{
background-image:none;

}

nav li a {
padding:13px 20px 11px 20px;
display:inline-block;
margin-top:-10px;
background-image:url(../img/nav-divider.png);
background-position:top right;
background-repeat:no-repeat;
font-family:champ, myriad, Arial, Helvetica, sans-serif;
font-size:16px;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
margin-right:-4px;

}

nav li a:hover {border: 0;
background-image:url(../img/hover.png);

}

nav li.current a {
color:#47cacd;

}

我对此感到茫然，非常感谢任何帮助，谢谢。

Answer 1

我认为IE中不支持HTML 5元素，如果你把一个带有导航ID的DIV并把你的所有CSS放在上面，它就可以了。如果你想使用HTML5，那么有javascript hacks可以帮助你：）

Answer 2

您的问题要简单得多，IE出于某种原因不接受您的菜单导航项的display:inline-block声明。虽然您可以通过使用html5样板提供的nav类并将其设置为.oldie来定位IE中的float:left菜单来修复此问题，因此请在CSS中尝试此操作：< / p>

.oldie nav li {
  float:left;
  z-index:9999;
}

顺便说一句，你需要为你的导航元素声明一个z-index值，以便它们出现在其他所有元素之上，试试这个：

nav ul li {
    z-index: 999;
}

下拉菜单在ie7或ie8中无法正常显示

2 个答案: