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

【问题标题】：Dropdown Menu not displaying properly in ie7 or ie8下拉菜单在 ie7 或 ie8 中无法正确显示
【发布时间】：2012-02-08 03:03:10
【问题描述】：

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

你可以在这里查看：

http://getsmarta.co/_cms/topflight/

这是我正在使用的 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;

}

我很茫然，任何帮助将不胜感激，谢谢。

【问题讨论】：

顺便说一句，您的下拉菜单显示在左侧链接和 Opera 中升降椅图片的后面。

标签： html css internet-explorer-7

【解决方案1】：

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

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

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

nav ul li {
    z-index: 999;
}

【讨论】：

谢谢，解决了。多年来，我一直试图弄清楚。我还注意到我可以通过在前面使用星号来做到这一点，我不知道这是否是一个好方法，例如：nav ul li { *float:left; }
@SuziLarsen 明星黑客将只针对我认为的某些版本的 IE，当你有一个针对旧浏览器的通用类时，它真的不需要，所以我会推荐这种方法来实现无黑客攻击样式表。此外，如果答案满足您的问题，请勾选绿色复选标记将其标记为正确，以便于分类和搜索未来的海报。
非常感谢，我正在使用你所说的通用类，它工作得很好。我也将您的答案标记为正确，我是该网站的新手，所以目前仍然有点绿色。 :)

【解决方案2】：

我认为 IE 不支持 HTML 5 元素，如果你放置一个 ID 为 nav 的 DIV 并将所有 CSS 放在上面，它会起作用。如果你想使用 HTML5，那么有 javascript hacks 可以帮助你:)

【讨论】：