下拉菜单在 ie7 或 ie8 中无法正确显示
我目前正在开发一个项目，但我在下拉菜单及其在 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;
}
我对此感到茫然，任何帮助将不胜感激，谢谢。
I am currently working on a project and I am having problems with the dropdown menu and how it is displaying in ie7 and ie8.
You can view it here:
http://getsmarta.co/_cms/topflight/
Here is the css I am using:
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;
}
I am at a loss with it and any help would be greatly appreciated, Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的问题要简单得多，IE 由于某种原因不接受您的菜单导航项的
display:inline-block声明。不过，您可以通过使用 html5-boilerplate 提供的.oldie类来定位 IE 中的nav菜单并将其设置为float:left 相反，所以在你的 CSS 中试试这个：顺便说一句，你还需要为你的导航元素声明一个
z-index值，以便它们出现在其他所有元素之上，尝试这：Your problem is much simpler then that, IE for some reason is not accepting your
display:inline-blockdeclaration for your menu nav items. Though you can fix it by targeting yournavmenu in IE by using the.oldieclass provided by the html5-boilerplate and setting it tofloat:leftinstead, so try this in your CSS:By the way, you need to declare a
z-indexvalue to your nav elements as well in order for them to appear on top of everything else, try this:我认为 IE 不支持 HTML 5 元素，如果你放置一个 ID 为 nav 的 DIV 并将所有 CSS 放在上面，它就会工作。
如果您想使用 HTML5，那么 javascript hack 可以帮助您:)
I think HTML 5 elements are not supported in IE, if you put a DIV with a ID of nav and put your all CSS on it, it will work.
If you want to use HTML5 then there are javascript hacks which can help you :)