ie6下Jquery的slideDown()与overflow:auto;冲突_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 12:10:321328瀏覽
本人在做一个下拉菜单的时候，为隐藏的项添加了slideDown（）的滑动效果。为外层容器添加overflow：auto；让其超出内容后能够出现滚动条。但是在ie6下却是被隐藏掉的，并没有滚动条的出现。同理的slideToggle（）也是如此。
以下是demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> ul,li { padding:0; margin:0; } ul { list-style:none; } #out { width:300px; height:400px; border:solid 1px #999; overflow:auto; } .show { display:none; height:100px; overflow:auto; }</style><script type="text/javascript" src="js/jquery1.6.1.js"></script><script type="text/javascript"> function show(obj) { var inner = $(obj).parent(); var showul = inner.find('ul:first'); showul.slideToggle(); }</script></head><body><ul id="out"> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li></ul></body></html> 本人希望既有slide的滑动效果，又希望ie6能支持滚动条显示，请各位大侠帮忙。谢谢了……
回复讨论(解决方案)
position:relative; 加个试试
position:relative; 加个试试
你好。我给我要显示的容器添加了position属性了。但是还是无法实现效果。
.show {
display:none;
height:100px;
overflow:auto !important;
}
.show {
display:none;
height:100px;
overflow:auto !important;
}
多谢多谢。我添加上去了，ie6果断的ok了。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn