Rumah >hujung hadapan web >html tutorial >ie6下Jquery的slideDown()与overflow:auto;冲突_html/css_WEB-ITnose

ie6下Jquery的slideDown()与overflow:auto;冲突_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 12:10:321375semak imbas

    本人在做一个下拉菜单的时候,为隐藏的项添加了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了。

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn