问题重现:

<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的更多相关文章

  1. IE6,IE7上设置body{overflow:hidden;}失效Bug

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

  2. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

  3. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  4. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  5. overflow:hidden失效问题

    2018-08-03 Questions about work 这几天开发的时候遇到了个问题,如图1. 写了个demo demo 地址 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM ...

  6. border-radius导致overflow:hidden失效问题。

    如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...

  7. ie6-7 overflow:hidden失效问题的解决方法

    即使父元素设置了overflow:hidden.解决这个bug很简单,在父元素中使用position:relative; zoom: 1;触发haslayout 即可解决该BUG.

  8. overflow:hidden失效

    overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文 ...

  9. 若父设置了overflow: hidden;子如何不受影响

    若父设置了overflow: hidden;子如何不受影响 1.如图: 2.只需要给一个position: absolute;定位 3.相当于重新给页面进行定位,右侧便会有滚动条出现. 4.overf ...

随机推荐

  1. golang 如何查看程序执行消耗时间

    写代码过程中,有时需要分析代码块的时间消耗. 本文介绍使用time包中的Since函数查看程序执行时间. package main import ( "fmt" "tim ...

  2. JSP+JavaBean+Servlet技术(MVC模型)

    一,Servlet开发用户在浏览器中输入一个网址并回车,浏览器会向服务器发送一个HTTP请求.服务器端程序接受这个请求,并对请求进行处理,然后发送一个回应.浏览器收到回应,再把回应的内容显示出来.这种 ...

  3. app定位器带xpath的 uiautomatorviewer

    参考文档:http://blog.csdn.net/kaka1121/article/details/53301517 在写脚本的过程中,总是遇到标签没有ID或者name等类似的唯一识别属性,为了能识 ...

  4. Linux中make, make install命令分别是什么

    用于linux源码安装软件,一般下载源码包得到文件:xxxx.tgz====================================1.解包软件 tar zxf xxxx.tgz======= ...

  5. Chrome 鼠标左键-新标签打开

    改chrome设置 1.打开google搜索主页2.打开右下角Settings选项->Search Settings3.找到where results open选项4.把Open each se ...

  6. java编译器

    编译: .java变成.class        前端编译   Sun javac Eclipse ECJ .class变成机器码      运行期编译 等HostSpot VM c1,c2 .jav ...

  7. setTimeout 方法带参数传递

    setTimeout(callback, after, arg1, arg2); 其中,callback即function(){},after为时间参数,指多久后执行callback,单位为毫秒,30 ...

  8. JS 传各种文件到后端

    由于要写一个前端上传文件按钮功能,本人前端是小白,所以在网上搜索了许多,发现FileReader非常好用. 不多BB,直接来. 1,前端只需要一个input标签, <input type=&qu ...

  9. Centos7修改profile错误导致命令行不能用,情况的解救方案,dir命令不能用

    Linux修改profile文件改错了,恢复的方法 Linux修改profile文件改错了,恢复的方法在改profile的时候,改出问题了,除了cd以外的命令基本都不能用了,连vi都不能用了,上网查了 ...

  10. C# WEB.API 接收并解析保存base64格式的图片

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...