IE下设置body{overflow:hidden;}失效Bug
问题重现:
<p>There are no scrollbars on this page in sane browsers</p>
html, body, p { margin: 0; padding: 0; } body { overflow: hidden; } p { width: 5000px; height: 5000px; }
IE6 IE7下不生效(IE6下横向纵向滚动条都在 IE7下纵向滚动条还在)
原因:
明智的浏览器(ex. chrome and 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, body, p { margin: 0; padding: 0; } html { overflow: visible; } body { overflow: hidden; } p { width: 5000px; height: 5000px; }
IE下设置body{overflow:hidden;}失效Bug的更多相关文章
- IE6,IE7上设置body{overflow:hidden;}失效Bug
IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...
- IE6 Bug overflow:hidden失效
下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...
- 在ie7中overflow:hidden失效问题及解决方案
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- css ie7中overflow:hidden失效问题及解决方法
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- overflow:hidden失效问题
2018-08-03 Questions about work 这几天开发的时候遇到了个问题,如图1. 写了个demo demo 地址 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM ...
- border-radius导致overflow:hidden失效问题。
如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...
- ie6-7 overflow:hidden失效问题的解决方法
即使父元素设置了overflow:hidden.解决这个bug很简单,在父元素中使用position:relative; zoom: 1;触发haslayout 即可解决该BUG.
- overflow:hidden失效
overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文 ...
- 若父设置了overflow: hidden;子如何不受影响
若父设置了overflow: hidden;子如何不受影响 1.如图: 2.只需要给一个position: absolute;定位 3.相当于重新给页面进行定位,右侧便会有滚动条出现. 4.overf ...
随机推荐
- C# 正则表达式 判断各种字符串(如手机号)
using System; using System.Text.RegularExpressions; namespace MetarCommonSupport { /// <summary&g ...
- PHP图像处理
1.创建画布: $img=imagescreatetruecolor(200,200); 创建颜色并填充 $red=imagecolorallocate($img,255,0,0); //创建颜色 ...
- Android Drawable Mipmap Vector使用及Vector兼容
原文地址:http://blog.csdn.net/eclipsexys/article/details/51838119 http://blog.csdn.net/qq_15545283/artic ...
- PAT 乙级 1038 统计同成绩的学生C++版
1038. 统计同成绩学生(20) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 本题要求读入N名学生的成绩,将 ...
- Java 经典练习题_Day06
面向对象与面向过程的比较 类与对象的关系 成员变量和局部变量 构造方法 this 构造代码块 局部代码块 匿名对象 一. 选择题 1.下列各项中关于面向对象及面向过程的说法错误的是:(BDE) A. ...
- R语言学习——列表
1.列表 列表是一种泛化的向量,其并没有要求所有元素都是同一类型,其元素甚至可为任意类型. 列表格式自由,为统计的计算结果的返回提供了极便利的方法. 2.列表的创建 可以用list()函数创建列表. ...
- javascript创建对象之函数构造模式和原型模式结合使用(四)
创建自定义类型的常见方式就是组合使用构造函数模式与原型模式一起使用. 构造函数模式用于定义实例对象的特有的部分(属性和方法),原型模式用于定义共享的部分. 这样最大限度的节省了内存的开销. funct ...
- 自己根据js的兼容封装了一个小小的js库
var gys = function () { } //oParent父节点 //获取所有的子元素 gys.prototype.getElementChildren = function (oPare ...
- Dependency Injection in ASP.NET Web API 2 Using Unity
What is Dependency Injection? A dependency is any object that another object requires. For example, ...
- 【Linux_Unix系统编程】Chapter8 用户和组
chapter8 用户和组 8.1 密码文件 /etc/passwd 每行都包含7个字段,之间用冒号分割,如下所示: mtk:x:1000:100:Michael:/home/mtk:/bin/bas ...