Heim > Artikel > Web-Frontend > ie6下Jquery的slideDown()与overflow:auto;冲突_html/css_WEB-ITnose
ie6下Jquery的slideDown()与overflow:auto;冲突_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:10:321328Durchsuche
本人在做一个下拉菜单的时候，为隐藏的项添加了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了。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：请教一下，搜狐的这个提示怎么做？_html/css_WEB-ITnoseNächster Artikel：这段程序应该怎么理解？输出结果到底是什么？_html/css_WEB-ITnose