CSS 问题：在 ie 中使用自定义 ul,li 下拉导航，尤其是 ie6 溢出：可见错误
ie6 bug 的本质（下拉条目必须通过溢出隐藏来截断，以防止 ie 错误地扩展而不是充当溢出：可见）可以在下面的屏幕截图中以当前（hacky）形式看到，并且可以在网站 http://zd-cms.com
错误（ie6）：
右（FF、IE8、Chrome）：
菜单条目应显示：
- 联系我们
- 经销商
- 支持
- 设计师服务
但是因为我可以'如果溢出：可见工作或以其他方式模拟它，下拉菜单的部分内容会被切断。目前 ie6 特定样式表中的 css 是：
#zd-nav {
padding-left:0;
margin-left:0;
background-color:transparent;
}
#zd-nav .zd-sub-nav{
margin-top:5px;
**width:73px**;
**overflow:hidden;**
}
我尝试过的错误的一些解决方案： 我知道 ie6 溢出：可见错误（如下所示： http://www .positioniseverything.net/explorer/expandingboxbug.html ），这会导致溢出：可见无效。 通读：修复 IE6 中的布局错误的策略？ 并尝试了一些黑客尝试让它真正充当溢出：可见，但没有任何效果。
现在，我已经将菜单的下拉部分设置为溢出：隐藏作为最后的解决方案，因为我无法让 ie6 让菜单以溢出：可见的方式运行。
指出 ie7 或 ie8 中导航的任何问题也将不胜感激。
建议？
The essence of the ie6 bug (dropdown entries must be truncated via overflow hidden to prevent ie from incorrectly expanding instead of acting as overflow:visible) can be seen in it's current (hacky) form in the screenshot below, and at the site http://zd-cms.com
Wrong (ie6):
Right (FF, IE8, Chrome):
The menu entry should show:
- Contact Us
- Resellers
- Support
- Designer Services
But since I can't get overflow:visible working or otherwise simulate it, parts of the dropdown menus get cut off. Currently the css in the ie6-specific stylesheet is:
#zd-nav {
padding-left:0;
margin-left:0;
background-color:transparent;
}
#zd-nav .zd-sub-nav{
margin-top:5px;
**width:73px**;
**overflow:hidden;**
}
A few solutions to the bug that I've tried:
I'm aware of the ie6 overflow:visible bug, (as per here: http://www.positioniseverything.net/explorer/expandingboxbug.html ), which renders overflow:visible null and void.
Read through: Strategy for Fixing Layout Bugs in IE6? and tried a few hacks to try to make it really act as overflow:visible, but nothing worked.
Right now, I've got the dropdown part of the menu set to overflow:hidden as a last ditch solution because I can't get ie6 to let the menu act in an overflow:visible manner.
Pointing out any problems with the nav in ie7 or ie8 would be much appreciated as well.
Suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这对我有用：
浮动给了 li 正确的宽度，相对位置和 z-index 使它显示在 ul 上方（即不受限制）。
This worked for me:
The float gives the li the right width, and the position relative and z-index make it show above (ie not constrained by) the ul.
尝试一下（假设您希望下拉菜单 [plus sub sub sub] 也被允许“浮动”在页面上任何其他阻碍的元素上）：
强制包含子导航的 li 相对位置将不改变页面上的位置。但是，它确实允许您在子元素上使用绝对位置，同时默认将它们包含在父元素中，并将其从页面的“流”中释放（从而防止下推效果）。
Try this out (assuming that you want the drop down [plus sub sub sub] to also be allowed to "float" over any other elements on the page that get in the way):
Forcing the li containg the sub navigation to position relative will not change position on the page. It does, however, allow you to use position absolute on child elements, while keeping them contained within the parent by default, AND releasing it from the "flow" of the page (thus preventing the push down effect).
尝试以下任一方法：
或者...
您也可以执行
height:100%;。这是微软发明的 hasLayout 问题。在这里找到信息：http://zoffix.com/css/ie/haslayout.shtml
希望这有帮助...
Try either:
or...
you could do
height:100%;also.It's a hasLayout issue that Microsoft invented. Found the info here: http://zoffix.com/css/ie/haslayout.shtml
Hope this helps...
这应该可以
使用自动宽度来采用每个导航项目的大小，而不需要为每个导航项目提供固定的宽度。
希望这有帮助。
This should work
An auto width is used to adopt the size of each navigation item without needing to give each one a fixed width.
Hope this helps.
我建议使用容器的相对位置，指定顶部、左侧和宽度
I suggest to use a relative position to the container, with specifying top and left and width