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

我目前正在开发一个项目，我遇到了下拉菜单的问题，以及它在ie7和ie8中的显示方式。下拉菜单在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;

}

我对此感到迷茫，任何帮助将不胜感激，谢谢。

来源

2012-02-07 Suzi Larsen

顺便说一句，你的下拉菜单可显示多达上的左侧和图片的链接后面在歌剧院升降椅。 – MetalFrog 2012-02-07 12:50:29

你的问题是更简单，然后，IE浏览器出于某种原因不接受你的菜单导航项的display:inline-block声明。虽然你可以通过使用由HTML5的样板提供的.oldie类并将其设置为float:left定位，而不是您在IE nav菜单修复它，所以尝试这在你的CSS：

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

顺便说一句，你需要为了申报z-index价值，你的导航元素，以及为他们在一切之上出现，试试这个：

nav ul li { 
    z-index: 999; 
}

来源

2012-02-07 13:02:18

谢谢，修复它。我一直在试图弄清楚这个问题。我也注意到我能够通过使用明星盈方来做到这一点，我不知道这是否是一种好的做法，例如： nav ul li {float：left; } – 2012-02-07 15:15:36

@SuziLarsen明星黑客将只瞄准某些版本的IE我相信，当你有一个通用类针对旧浏览器时，它确实不需要，所以我会建议这种方法用于免费的样式表。另外，如果答案满足您的问题，请勾选绿色选中标记以更轻松地进行分类并搜索未来的海报，以此标记为正确。 – 2012-02-07 15:21:17

非常感谢，我使用的是像你说的那样的通用课程，它工作得很好。我的答案也是正确的，我对这个网站是新手，所以现在还是有点绿色。 :) – 2012-02-08 15:04:26

我觉得HTML 5元素在IE中是不支持的，如果你把一个ID为nav的DIV放到你的CSS上，它就可以工作。如果你想使用HTML5，那么有JavaScript的黑客可以帮助你:)

来源

2012-02-07 12:38:58

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

回答

相关问题