问题重现:

<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. Tomcat 自动化部署

    Tomcat 自动化部署脚本 使用方法: ./autodeploy.sh test 其中autodeploy.sh 为脚本的文件名, test为war的文件名. #!/bin/sh now=`date ...

  2. 【selenium】XPATH语法(一)

    XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. 我们将在下面的例子中使用这个 XML 文档. <?xml v ...

  3. SEO之H1,H2,H3,H4....STRONG使用方法

    作为一个SEO从业人员,我们不仅仅是要懂得如何通过网站内容和外链等SEO手段,其实一个优秀的SEOER在从事一个SEO案例时,首先着手的是如何从网站程序本身来打好网站SEO基础. 在平时和很多朋友的交 ...

  4. MySQL优化技巧之四:mysql数据库开发常见问题及优化[转]

    mysql 数据库是被广泛应用的关系型数据库,其体积小.支持多处理器.开源并免费的特性使其在 Internet 中小型网站中的使用率尤其高.在使用 mysql 的过程中不规范的 SQL 编写.非最优的 ...

  5. TOM带你玩充电 篇三:15款5号电池横评及选购建议——南孚金霸王小米宜家耐时品胜一个都逃不了

    双鹿电池的几个版本 理论上来说性价比:绿骑士>金骑士>黑骑士>蓝骑士 绿骑士和金骑士都很不错.哪个便宜买哪个. 小米性价比虽然最高,但是超市买不到. 蓝骑士是普通碳性电池,黑骑士是高 ...

  6. Appium+python自动化8-Appium Python API

    Appium+python自动化8-AppiumPython API   前言: Appium Python API全集,不知道哪个大神整理的,这里贴出来分享给大家. 1.contexts conte ...

  7. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  8. linux安装oracle的官方文档

    1:https://docs.oracle.com/cd/E11882_01/install.112/e47689/toc.htm 2:https://oracle-base.com/articles ...

  9. EC20 MODULE serial com log in passwd

    ec20 module would print debug info via debug uart, and you can log in by user root, the passwd is qu ...

  10. 面对最菜TI战队,OpenAI在Dota2上输的毫无还手之力

    作者:Tony Peng 去年,OpenAI 的 1v1 AI 击败了世界顶尖选手 Dendi,OpenAI CTO Greg Brockman 承诺:明年,我们会带着 5v5 的 AI bot 重回 ...