这段代码在火狐中测试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="display:none">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="a">
<div class="b">bbb</div>
<ul style="display:none">
<li>test</li>
<li>test</li>
<li>testzxcvz</li>
<li>testasfsadf</li>
</ul>
</div>
<div class="a">
<div class="b">bbb</div>
<ul style="display:none">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</body>
</html>
<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),可以使用自定义

 登录

wybshyy
关注
overflow不超出时不显示滚动条 属性解决内容未超出依然显示滚动条轨道的问题 原创
2020-09-03 17:24:58

wybshyy 
码龄11年
关注
overflow不超出时不显示滚动条
竖着的滚动条自动overflow-y: auto
横着的滚动条自动overflow-x: auto
overflow-y未超出仍然显示滚动条解决办法
后端返回的数据有时多有时少,多的时候需要设置最大高度和滚动条显示,于是css样式如下: p { max-height: 100px; overflow-y: scroll; } 效果:即使不超过这个高度,也会出现右边的滚动条,显然不是想要的。改进如下: p { max-height: 100px; overflow-y: auto; } 效果是:...
浏览器打开

规定元素宽高,内容超出则显示滚动条,内容不超出则隐藏滚动条。
前端小GET,好久没用,需求用到了突然忘记了,找了一番才找到,那么顺便记录下来吧。 <div id="v1"></div> <style type="text/css"> #v1{width: 100px;height: 100px;overflow-y:auto ;} </style> 内容超出100px则出现滚...
浏览器打开
element的级联选择器Cascader无滚动条样式全部显示超出屏幕解决办法
查了半天在大佬的博客里找到解决办法了, // 在全局的global.css样式中给el-cascader-panel添加高度 .el-cascader-panel{ height: 200px; } 原因在评论区: // 版本不一致造成的,你如果把浏览器窗体缩小显示就能看到整个级联选择器了,它是全部显示出来没有滚动条。强制在全局样式中更改就可以了。在组件内部样式中修改不好用 ...
浏览器打开
导入EXCEL表时,提示找不到可安装的ISAM怎么办_小熊猫-CSDN博客
ajax有时请求不到数据 后台,有时收不到返回值的解决办法 overflow不超出时不显示滚动条 属性解决内容未超出依然显示滚动条轨道的问题 电脑C盘缓存路径在哪,清理...
CSS溢出属性overflow:auto溢出的时候才显示滚动条 不溢..._CSDN博客
/* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */ /* overflow: scroll; */ /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */ overflow: auto...
overflow 当内容溢出元素框 出现滚动条
overflow-x: visible|hidden|scroll|auto|no-display|no-content;x 说明: overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。 值 描述 测试 visible 不裁剪内容,可能会显示在内容框之外。 测试 hidden 裁剪内容 - 不提供滚动机制。 ...
浏览器打开
overflow: scroll隐藏滚动条的问题
最近用vue写wap站的时候遇到了微信打开页面滚本回答被网友采纳
然后保证ul的长度大于外围的div的长度