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++ 常用函数方法
/* * 拆分字符串 * 参数: * strData 字符串 * split 分隔符 * 返回: * 返回动态数组std::vector<std::string> ,记得要delete 内 ...
- Android 对话框(Dialog)大全
转自: http://www.cnblogs.com/salam/archive/2010/11/15/1877512.html Activities提供了一种方便管理的创建.保存.回复的对话框机制, ...
- 查看selenium api的方法
首先打开命令行,在doc窗口输入: python -m pydoc -p 4567简单解释一下: python -m pydoc表示打开pydoc模块,pydoc是查看python文档的首选工具:-p ...
- 退出循环break,在while、for、do...while、循环中使用break语句退出当前循环,直接执行后面的代码。
在while.for.do...while循环中使用break语句退出当前循环,直接执行后面的代码. 格式如下: for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) {break;} ...
- Win CE 5.0 增加电池电量显示
摘自 http://blog.csdn.net/li0531/article/details/8818243 同时只在右上角显示一个 Label 控件,因此代码量精简了很多. [DllImport(& ...
- nginx二进制编译-启动脚本编写
首先先把这个文件上传到root目录下,并解压 #tar zxf nginx-1.11.2.tar.gz 写脚本 # vi nginx-running.sh 内容如下 #!/bin/bash #chkc ...
- 怎样使用 css 的@media print控制打印
怎样使用 css 的@media print控制打印? <HTML> <HEAD> <TITLE> New Document </TITLE> < ...
- Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图
Maven 组件界面介绍 如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项 ...
- 032:基于Consul和MGR的MySQL高可用架构
目录 一.Consul 1.Consul简介 2.准备环境 3.Consul 安装 4.Consul配置文件 5.Consul 服务检查脚本 6.Consul启动 二.MGR搭建 1.MGR配置 2. ...
- VS:error C3872: '0xe044': this character is not allowed in an identifier解决方法
从网上粘贴代码到编译器中直接编译的话,会报这个错误,但是代码看上去是没有问题的,实际的原因是因为我们粘贴代码的时候粘贴了中文字符进来. 解决方法:就是把这段代码放到记事本里,选择替换把中文输入空 ...