CSS 问题：在 ie 中使用自定义 ul,li 下拉导航，尤其是 ie6 溢出：可见错误

Question

ie6 bug 的本质（下拉条目必须通过溢出隐藏来截断，以防止 ie 错误地扩展而不是充当溢出：可见）可以在下面的屏幕截图中以当前（hacky）形式看到，并且在该站点 http://zd-cms.com

错误（即6）：

http://img249.imageshack.us/img249/352/screenshot68.png http://img249.imageshack.us/img249/352/screenshot68.png

右（FF、IE8、Chrome）：

http://img402.imageshack.us/img402/7208/screenshot69.png http://img402.imageshack.us/img402/7208/screenshot69.png

菜单项应显示：

• 联系我们
• 经销商
• 支持
• 设计师服务

但由于我无法得到溢出：可见工作或以其他方式模拟它，下拉菜单的部分内容被切断。目前 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 中导航的任何问题也将不胜感激。

建议？

Answer 1

这对我有用：

#zd-nav .zd-sub-nav li{
    float:left; 
    clear:left; 
    position:relative; 
    z-index:20; /* or some other arbitrary biggish number */
}

浮动赋予 li 正确的宽度，相对位置和 z-index 使其显示在 ul 上方（即不受其限制）。

Answer 2

试试这个（假设您希望下拉菜单 [plus sub sub sub] 也被允许“浮动”在页面上任何其他阻碍的元素上）：

.zd-nav-active {
    position: relative;
}
.zd-sub-nav {
    position: absolute;
    z-index:10000;
}

强制包含子导航的 li 相对定位不会改变页面上的位置。但是，它确实允许您在子元素上使用绝对位置，同时默认将它们包含在父元素中，并将其从页面的“流”中释放（从而防止下推效果）。

Answer 3

尝试以下任一方法：

word-wrap:break-word; /*use this in the #zd-nav .zd-sub-nav class*/

或者...

width:100%; /*instead of setting the width to 73px*/

你可以做 height:100%; 还。

这是微软发明的 hasLayout 问题。在这里找到了信息： http://zofix.com/css/ie/haslayout.shtml

希望这可以帮助...

Answer 4

这应该有效

#zd-nav .zd-sub-nav{ 
    margin-top:5px;
    width: auto;
    display: block;
    overflow: visible
    }

自动宽度用于采用每个导航项目的大小，而不需要为每个导航项目提供固定的宽度。

希望这可以帮助。

Answer 5

我建议使用容器的相对位置，指定顶部、左侧和宽度