- 浏览: 120855 次
- 性别:
- 来自: 深圳
-
文章分类
问题重现:
<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; }
<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; }
发表评论
-
CSS雪碧图demo(含雪碧代码)
2016-06-12 21:09 772css雪碧图demo效果图,含hover,代码附件下载sp ... -
easyui subgrid 多层子表格参考
2015-08-11 14:25 859参考回帖代码 http://bbs.csdn.net/topi ... -
鼠标拖拽DIV效果
2015-03-31 18:09 523代码效果-鼠标点击DIV,可以任意拖拽DIV <! ... -
css控制文本自动换行
2015-03-20 14:34 612http://wenku.baidu.com/link?ur ... -
js表单提交
2014-05-09 17:07 645js 表单提交 <html> <he ... -
滚动条样式
2014-05-06 20:53 334参考资料: http://manos.malihu.gr/t ... -
原生JavaScript技巧大收集100(上)
2013-12-30 19:53 432原生JavaScript技巧大收集,JavaScipt初学的各 ... -
编写jquery插件中的闭包demo
2013-12-18 16:43 2367demo中的代码,需要jquery库文件支持 //闭包特性 ... -
怎样让一个div高度自适应浏览器
2013-12-18 09:33 568网页中需要同时设置如下代码 html,body{heigh ... -
jquery框架学习
2013-12-10 09:27 406http://developer.51cto.com/art/ ... -
用JS的eval解析JSON中的注意点
2013-07-18 22:43 1010eval 方法 将其中的参数 ... -
鼠标hover悬停事件
2013-07-16 16:50 860<title>鼠标hover悬停事件< ... -
html滚动条CSS样式
2013-07-16 16:19 890DEMO: body{ SCROLLBAR-FACE ... -
json数据结构
2013-06-06 16:42 622<script> //=====1===== ... -
JS函数-接收任意个参数
2013-06-06 09:28 2289<script> //可以接收任意多个参数 ... -
EXTJS3.0中文帮助文档
2013-06-05 19:38 843EXTJS中文帮助文档下载 -
EXTJS2.0表格中文排序
2013-06-05 14:42 995//引入必要的EXT开发环境 <link rel ... -
EXTJS3.0 IE9兼容性解决方案--IE兼容性解决方案
2013-05-24 14:57 1545我们的一个项目是用ExtJS做的,但在IE9下几乎完全不能用。 ... -
UI讨论
2013-05-22 15:27 7831.公司如果要研发自己的UI框架,JQuery和EXT该如何选 ... -
Extjs组件render说明与Demo
2013-05-02 16:05 17171.调用组件的render方法 panel.render ...
相关推荐
- **问题描述**:在IE6/7中,设置`body { overflow: hidden; }`后,并不能真正隐藏滚动条。 - **解决方案**:通过设置`html { overflow: hidden; }`来确保滚动条被正确隐藏。 ##### 3. **HasLayout属性的高度问题**...
### IE6常见bug及其解决方法 #### 一、IE6怪异解析之padding与border算入宽高 **问题描述**: 在没有指定文档类型声明的情况下,IE6会使用其特有的“怪异模式”(Quirks Mode)来解析页面布局。在这种模式下,元素...
- 对于IE6和IE7中的滚动条问题,可以将overflow设置为hidden,并在body标签上添加 Overflow: hidden; *height: 0。 - 解决hasLayout元素子元素出现加倍margin-left的问题,可以通过调整margin-left的值或使用*margin...
2. **IE6的双倍边距BUG** 在IE6中,浮动元素的外边距会被解释为两倍。解决方法是在浮动元素上添加`display:inline`,这可以消除额外的边距。 3. **FF下文本无法撑开容器高度** 标准浏览器(如Firefox)中,固定...
首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...