IE6,IE7下设置body{overflow:hidden;}失效Bug

做项目时发现IE7下设置body{overflow:hidden;}仍会出现纵向滚动条。经分析,不同浏览器对html的overflow初始赋值不同,只有dom根结点html设置overflow:visible时,body的overflow值才会应用到视图区。可通过设置html的overflow值解决IE6和IE7的滚动条问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一下:

 

 

    设置body{overflow:hidden;}:IE6 IE7下不生效。IE6下横向纵向滚动条都在,IE7下纵向滚动条还在;

 

分析原因:
chrome、firefox会初始付值给html{overflow:visible;}

IE6 初始付值html{overflow-x:auto;overflow-y:scroll;}

IE7 初始付值html{overflow-x:visible;overflow-y:scroll;}

只有dom根结点(也就是html根节点)设置html{overflow:visible;}的时候,浏览器才会将body元素中的overflow值应用到视图区。

举个例子说:

设置了body{overflow:hidden},还会出现滚动条,不过这个滚动条不是body的,是html的,只有你设置html{overflow:visible;} body{overflow的值}才能传递到html{}中去。这样html的值就变成了{overflow:hidden},ok没有滚动条了。这样就很明了啦,并不是bug,而是浏览器初始值不同产生的问题。

 

所以上面的问题就是通过设置html的overflow的值来解决IE6和IE7下的存在的这个问题;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值