CSS 问题:在 ie 中使用自定义 ul,li 下拉导航,尤其是 ie6 溢出:可见错误
-
06-07-2019 - |
题
ie6 bug 的本质(下拉条目必须通过溢出隐藏来截断,以防止 ie 错误地扩展而不是充当溢出:可见)可以在下面的屏幕截图中以当前(hacky)形式看到,并且在该站点 http://zd-cms.com
错误(即6):
右(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 中导航的任何问题也将不胜感激。
建议?
解决方案
这对我有用:
#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 上方(即不受其限制)。
其他提示
试试这个(假设您希望下拉菜单 [plus sub sub sub] 也被允许“浮动”在页面上任何其他阻碍的元素上):
.zd-nav-active {
position: relative;
}
.zd-sub-nav {
position: absolute;
z-index:10000;
}
强制包含子导航的 li 相对定位不会改变页面上的位置。但是,它确实允许您在子元素上使用绝对位置,同时默认将它们包含在父元素中,并将其从页面的“流”中释放(从而防止下推效果)。
尝试以下任一方法:
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
希望这可以帮助...
这应该有效
#zd-nav .zd-sub-nav{
margin-top:5px;
width: auto;
display: block;
overflow: visible
}
自动宽度用于采用每个导航项目的大小,而不需要为每个导航项目提供固定的宽度。
希望这可以帮助。
我建议使用容器的相对位置,指定顶部、左侧和宽度