首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

ie6下Jquery的slideDown()与overflow:auto;冲突,该如何解决

2012-05-02 
ie6下Jquery的slideDown()与overflow:auto冲突本人在做一个下拉菜单的时候,为隐藏的项添加了slideDown()

ie6下Jquery的slideDown()与overflow:auto;冲突
本人在做一个下拉菜单的时候,为隐藏的项添加了slideDown()的滑动效果。为外层容器添加overflow:auto;让其超出内容后能够出现滚动条。但是在ie6下却是被隐藏掉的,并没有滚动条的出现。同理的slideToggle()也是如此。
  以下是demo
 

HTML code
<!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; 加个试试
[解决办法]
.show {
display:none;
height:100px;
overflow:auto !important;
}

热点排行