顶峰电影论坛:IE6,IE7下设置body{overflow:hidden;}失效Bug

来源：百度文库 编辑：九乡新闻网 时间：2024/10/05 21:59:37

译＋整理]IE6,IE7下设置body{overflow:hidden;}失效Bug

05.01.2011, Bug修复, 前端技术, 边译边学, by 飞长.

参考文章：http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency

此项其实并不是Bug，只是各浏览器默认付值不同造成的，其他明智的浏览器还好，这个bug只出现在IE6 IE7下

 

问题重现：

There are no scrollbars on this page in sane browsers
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值应用到视图区。

这样就很明了啦，并不是bug，而是浏览器初始值不同产生的问题。

 

解决办法：

html, body, p {    margin: 0;    padding: 0;}html {    overflow: visible;}body {    overflow: hidden;}p {    width: 5000px;    height: 5000px;}
IE6,IE7下设置body{overflow:hidden;}失效Bug 文字左右滚动，ie6 overflow:hidden不起作用的情况 网页PNG透明支持(IE6、IE7、firefox下测试通过) 解决IE6下float right 换行bug方案 微软中国图片回顾IE8、IE7、IE6 css解决IE6，IE7，firefox兼容性问题 ie6 ie7 FF 兼容 - 菜菜贝的日志 - 网易博客 IE6.0、IE7.0 与FireFox CSS兼容的解决方法 解决firefox ie6 ie7 ie8的css样式兼容问题 IE6 IE7 IE8 opera等浏览器唯一识别CSS标识 CSS浏览器兼容问题(IE6.0、IE7.0 与 FireFox) 我设置div的margin-top IE6下居然无效 haslayout Absolutely positioned boxes show outside their parent container styled with overflow:hidden IE6背景图片缓存bug解决方法 - boral_li的专栏 IE7、IE8下载ActiveX控件的设置 网页在IE6和IE7显示错位的问题 - 网页设计 - 思缘论坛 平面设计,Photosho... IE6/IE7支持的P3P导致iframe和跨站点cookie被阻止 IE6 IE7 FF的CSS Hack总结(转载) - john23.net - 博客园 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)(转) IE6/IE7/FF的兼容性通用解决方法_Uruana - the Mark of the... 解决IE6下浮动后的元素使用负margin被隐藏的重大bug 去掉IE7启动时的"自定义您的设置"方法 如何在 IE6,7 下实现 white-space: pre-wrap;