0

ie6 错误的本质（下拉条目必须通过隐藏溢出来截断，以防止 ie 错误地扩展而不是充当溢出：可见）可以在下面的屏幕截图中的当前（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;**
}

我尝试过的错误的一些解决方案：我知道 ie6 溢出：可见错误（根据此处：http ://www.positioniseverything.net/explorer/expandingboxbug.html ），它呈现溢出：可见无效。通读：在 IE6 中修复布局错误的策略？并尝试了一些技巧以使其真正充当溢出：可见，但没有任何效果。

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

指出 ie7 或 ie8 中导航的任何问题也将不胜感激。

建议？

4

5 回答 5

1

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

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

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

于 2009-11-04T07:26:05.567 回答
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 上方（即不受约束）。

于 2009-11-09T17:50:36.427 回答
0

尝试：

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

希望这可以帮助...

于 2009-10-27T18:00:45.677 回答
0

这应该工作

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

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

希望这可以帮助。

于 2009-11-10T13:13:19.100 回答
0

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

于 2009-11-10T14:38:08.593 回答