`

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

 
阅读更多

  最近做项目发现在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下的存在的这个问题;

1
0
分享到:
评论

相关推荐

    使用overflow: hidden来禁用页面滚动条

    禁用页面滚动条的方法有很多,但最简单、最快的也就数overflow: hidden了,下面是禁用html及body滚动条的方法,兼容IE6、7

    ie8 body overflow hidden 无效的解决方法

    body{ overflow:hidden;} 在ie8下无效 替换为如下html { overflow:hidden;} 这样就可以实现隐藏滚动条了 而且是兼容目前所有浏览器的

    JS+css 图片自动缩放自适应大小

    在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 ◎ width:600px; 在所有浏览器中图片的大小为600px; ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。 ◎ overflow:hidden; 超出的部分隐藏...

    css overflow: hidden 的用法(溢出隐藏及清除浮动)

    溢出隐藏 就是隐藏超出规定高度的文本或者图像...overflow: hidden;} </style> </head> <body> 元素中的内容超出了给定的宽度和高度属性,overflow属性 可以确定显示的方式,以及是否显示滚动条

    JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关。...

    跨年烟花代码,附上效果图,截图,亲测有效,非常棒

    overflow: hidden;} .city{width:100%;position:fixed;bottom: 0px;z-index: 100;} .city img{width: 100%;} <title>html5夜景放烟花绽放动画效果 <body onselectstart = "return false"> ...

    2023跨年烟花代码,直接打开HTML就可以,非常浪漫,还可以修改文字,亲测有效果

    overflow: hidden;} .city{width:100%;position:fixed;bottom: 0px;z-index: 100;} .city img{width: 100%;} <title>html5夜景放烟花绽放动画效果 <body onselectstart = "return false"> ...

    IE6 fixed的完美解决方案

    } 这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成“浮动”的元素;还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了以上的问题。 代码如下: <!DOCTYPE ...

    IE6特有bug兼容性问题整理

    其结果是无论IE6还是火狐浏览器下,背景图片都是固定的死死的,不错。但是,一旦html标签带着background属性参合进来,事情就要发生转变了。问题代码: html{background:white;} body{background:url(../image/404....

    右下角广告弹窗1.html

    overflow:hidden;display:none;font-size:12px;z-index:10;} #tip p {padding:6px;} #tip h1,#detail h1 {font-size:14px;height:25px;line-height:25px;background-color:#0066CC;color:#FFFFFF;padding:0px 3px 0...

    javascript 弹性菜单,垂直的那种

    body {cursor:hand; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;} .link {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden...

    CSS使用特效

    overflow: hidden; } #gallery img{ position: absolute; } #thumbs{ width: 100px; height: 300px; overflow: hidden; } #next{ display: block; width: 47px; height: 43px; background: url(img/...

    HTML5+Canvas漂亮的3D烟花动画特效

    一款非常漂亮的基于HTML5+Canvas实现的放烟花特效,地面旋转,夜空3D烟花动画特效。

    全屏幻灯片JQ+JS+CSS3

    overflow: hidden} #slideshow .img span{position: absolute;width: 19999px;display: block} #slideshow .btns{z-index: 10;position: absolute;width: 930px} #slideshow .btns b{position: absolute;width: 100...

    IE6实现position:fixed bug (固定窗口方法)的实例

    这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...

    jQuery电脑桌面用户登录界面特效.zip

     overflow: hidden; } .lock {  z-index: 10;  position: absolute;  width: 100%;  height: 100%;  background: url(images/lock.jpg) no-repeat center;  background-size: 100%; }

    让IE6支持最小高度min-height、最大高度max-height的方法

    1、IE6支持max-height解决方法 IE6支持最大高度解决CSS代码:  复制代码代码如下:.yangshi{max-height:1000px;_height:[removed](document.documentElement.clientHeight||document.body.clientHeight)<1000?”...

    随机抽人系统(公开课)

    overflow: hidden; background-color: #60AEEF; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; } h1 { font-size: 4...

Global site tag (gtag.js) - Google Analytics