最近做项目发现在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下的存在的这个问题;
分享到:
相关推荐
禁用页面滚动条的方法有很多,但最简单、最快的也就数overflow: hidden了,下面是禁用html及body滚动条的方法,兼容IE6、7
body{ overflow:hidden;} 在ie8下无效 替换为如下html { overflow:hidden;} 这样就可以实现隐藏滚动条了 而且是兼容目前所有浏览器的
在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 ◎ width:600px; 在所有浏览器中图片的大小为600px; ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。 ◎ overflow:hidden; 超出的部分隐藏...
溢出隐藏 就是隐藏超出规定高度的文本或者图像...overflow: hidden;} </style> </head> <body> 元素中的内容超出了给定的宽度和高度属性,overflow属性 可以确定显示的方式,以及是否显示滚动条
样式中需要对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"> ...
overflow: hidden;} .city{width:100%;position:fixed;bottom: 0px;z-index: 100;} .city img{width: 100%;} <title>html5夜景放烟花绽放动画效果 <body onselectstart = "return false"> ...
} 这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成“浮动”的元素;还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了以上的问题。 代码如下: <!DOCTYPE ...
其结果是无论IE6还是火狐浏览器下,背景图片都是固定的死死的,不错。但是,一旦html标签带着background属性参合进来,事情就要发生转变了。问题代码: html{background:white;} body{background:url(../image/404....
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...
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...
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烟花动画特效。
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.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
overflow: hidden; } .lock { z-index: 10; position: absolute; width: 100%; height: 100%; background: url(images/lock.jpg) no-repeat center; background-size: 100%; }
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...