这段代码在火狐中测试ul是有滚动条的。但是IE没有。高手帮忙看看怎么样才能在IE中显示出来。代码中引用了jquery。复制后可以直接运行<html><head><scripttype="text/javascript"src="...
这段代码在火狐中测试ul是有滚动条的。但是IE没有。高手帮忙看看怎么样才能在IE中显示出来。代码中引用了jquery。复制后可以直接运行
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b").click(function(){
if($(this).siblings().is(":hidden") || $(this).is(":only-child")){
$(".b").each(function(){
if(!$(this).siblings().is(":hidden")){
$(this).siblings().slideUp(0);
}
});
}
$(this).siblings().slideToggle(1000);
});
});
</script>
<style type="text/css">
ul{
padding:0px;
margin:0px;
height:65px;
width:100px;
overflow:auto;
}
li{
padding-left:10px;
}
</style>
</head>
<body>
<div style="">
<div class="a">
<div class="b">bbb</div>
<ul style="">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="a">
<div class="b">bbb</div>
<ul style="">
<li>test</li>
<li>test</li>
<li>testzxcvz</li>
<li>testasfsadf</li>
</ul>
</div>
<div class="a">
<div class="b">bbb</div>
<ul style="">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</body>
</html>
<!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>
<title>无标题页</title>
<style type="text/css">
.Attopic{display:block; left: 56px; position: absolute; top: 68px; z-index: 999; background: #fff; border: 1px solid #ccc;
padding: 2px; width: 180px; height: 100px; overflow-x:hidden; overflow-y:hidden;}
</style>
</head>
<body>
<ul id="tidao" style="" class="Attopic">
<li><input type="text" onclick="elect('mingfang2009')" value="mingfang2009" class="atinput" id="textfield"
name="textfield"></li>
<li><input type="text" onclick="elect('dandan')" value="dandan" class="atinput" id="textfield" name="textfield"></li>
<li><input type="text" onclick="elect('vincen')" value="vincen" class="atinput" id="textfield" name="textfield"></li>
<li><input type="text" onclick="elect('hua103')" value="hua103" class="atinput" id="textfield" name="textfield"></li>
<!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>
<title>无标题页</title>
<style type="text/css">
.Attopic{display:block; left: 56px; position: absolute; top: 68px; z-index: 999; background: #fff; border: 1px solid #ccc; padding: 2px; width: 180px; height: 100px; overflow-x:hidden; overflow-y:hidden;}
</style>
</head>
<body>
<ul id="tidao" style="" class="Attopic">
<li><input type="text" onclick="elect('mingfang2009')" value="mingfang2009" class="atinput" id="textfield" name="textfield"></li>
<li><input type="text" onclick="elect('dandan')" value="dandan" class="atinput" id="textfield" name="textfield"></li>
<li><input type="text" onclick="elect('vincen')" value="vincen" class="atinput" id="textfield" name="textfield"></li>
<li><input type="text" onclick="elect('hua103')" value="hua103" class="atinput" id="textfield" name="textfield"></li>
<li><input type="text" onclick="elect('hemin')" value="hemin" class="atinput" id="textfield" name="textfield"></li>
</ul>
<script type="text/javascript">
var ul = document.getElementById("tidao");
var childs = ul.childNodes;
var height = 0;
for(var i = 0 ; i < childs.length; i ++)
{
if(childs[i].tagName == "LI") height+=childs[i].offsetHeight;
}
if(height>100) ul.style.overflowY="scroll"
</script>
</body>
</html>
</ul>
<script type="text/javascript">
var ul = document.getElementById("tidao");
var childs = ul.childNodes;
var height = 0;
for(var i = 0 ; i < childs.length; i ++)
{
if(childs[i].tagName == "LI") height+=childs[i].offsetHeight;
}
if(height>100) ul.style.overflowY="scroll"
</script>
</body>
</html>
页面中有很多时候需要多区域定相应的宽高，然而当内容过多时会出现超出元素区域或出现滚动条的情况，如何解决这种状况呢？一起去看看吧！
一、滚动条样式相关的CSS属性
overflow属性规定当内容溢出元素框时需要对其进行的操作，即指当对象的内容超过其指定高度及宽度时如何显示内容。
1、overflow属性的值
visible：默认值内容不会被修剪，呈现在元素框之外。
hidden： 内容会被修剪，超出元素的内容隐藏，即不可见。
scroll： 内容会被修剪，超出的内容会出现滚动条，用滚动的方式查看其余的内容。
auto： 浏览器会根据内容相对于元素的宽高自动添加滚动条，用滚动的方式查看其余的内容。
inherit：规定从父元素继承其overflow属性的值。
2、定义与滚动相关的属性及其值
overflow:auto; 会根据内容相对于元素的宽高自动添加滚动条。
overflow:scroll; 显示横、纵向滚动条。
overflow-x:hidden; 不显示横向的滚动条。
overflow-y:hidden; 不显示纵向的滚动条。
overflow-x:scroll; 显示横向的滚动条。
overflow-y:scroll; 显示纵向滚动条。
3、滚动条的样式与滚动属性的运用
滚动条的样式与滚动属性的运用示例
二、在页也中去掉指定方向滚动条
1、去掉横向滚动条
<body style="overflow:scroll;overflow-x:hidden">或selector{overflow:scroll;overflow-x:hidden}。
2、去掉竖向滚动条
<body style="overflow:scroll;overflow-y:hidden">或selector{overflow:scroll;overflow-y:hidden}。
3、去掉滚动条：
<body scroll="no">或selector{overflow:hidden;}
三、CSS实现隐藏滚动条同时又可以滚动
即可以隐藏滚动条，同时又保证页面可以滚动？
使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。
由于只需要兼容移动浏览器（Chrome 和 Safari），可以使用自定义
