Question

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

错误（ie6）：

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;**
}

我尝试过的bug的一些解决方案：我知道ie6溢出：可见的bug，（按照这里：http://www.positioniseverything.net/explorer/expandingboxbug.html），它呈现溢出：可见null和void。阅读：Strategy for Fixing Layout Bugs in IE6?并尝试了一些黑客试图让它真正充当溢出：可见，但没有任何效果。

现在，我已经将菜单设置的下拉部分设置为溢出：隐藏为最后一个解决方案，因为我无法让ie6让菜单以溢出：可见的方式进行操作。

在ie7或ie8中指出导航的任何问题也将非常受欢迎。

建议？

Answer 1

试试这个（假设您希望下拉[加上子子]也可以“浮动”在页面上阻碍的任何其他元素上：

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

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

Answer 2

这对我有用：

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

float赋予li正确的宽度，位置relative和z-index使它显示在ul上方（即不受约束）。

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://zoffix.com/css/ie/haslayout.shtml

希望这会有所帮助......

Answer 4

这应该有效

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

自动宽度用于采用每个导航项的大小，而无需为每个导航项赋予固定宽度。

希望这有帮助。

Answer 5

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

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

5 个答案: