- 浏览: 118699 次
- 性别:
- 来自: 深圳
文章分类
问题重现:
<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 763css雪碧图demo效果图,含hover,代码附件下载sp ... -
easyui subgrid 多层子表格参考
2015-08-11 14:25 851参考回帖代码 http://bbs.csdn.net/topi ... -
鼠标拖拽DIV效果
2015-03-31 18:09 513代码效果-鼠标点击DIV,可以任意拖拽DIV <! ... -
css控制文本自动换行
2015-03-20 14:34 603http://wenku.baidu.com/link?ur ... -
js表单提交
2014-05-09 17:07 634js 表单提交 <html> <he ... -
滚动条样式
2014-05-06 20:53 324参考资料: http://manos.malihu.gr/t ... -
原生JavaScript技巧大收集100(上)
2013-12-30 19:53 424原生JavaScript技巧大收集,JavaScipt初学的各 ... -
编写jquery插件中的闭包demo
2013-12-18 16:43 2349demo中的代码,需要jquery库文件支持 //闭包特性 ... -
怎样让一个div高度自适应浏览器
2013-12-18 09:33 554网页中需要同时设置如下代码 html,body{heigh ... -
jquery框架学习
2013-12-10 09:27 397http://developer.51cto.com/art/ ... -
用JS的eval解析JSON中的注意点
2013-07-18 22:43 993eval 方法 将其中的参数 ... -
鼠标hover悬停事件
2013-07-16 16:50 851<title>鼠标hover悬停事件< ... -
html滚动条CSS样式
2013-07-16 16:19 875DEMO: body{ SCROLLBAR-FACE ... -
json数据结构
2013-06-06 16:42 602<script> //=====1===== ... -
JS函数-接收任意个参数
2013-06-06 09:28 2272<script> //可以接收任意多个参数 ... -
EXTJS3.0中文帮助文档
2013-06-05 19:38 831EXTJS中文帮助文档下载 -
EXTJS2.0表格中文排序
2013-06-05 14:42 984//引入必要的EXT开发环境 <link rel ... -
EXTJS3.0 IE9兼容性解决方案--IE兼容性解决方案
2013-05-24 14:57 1530我们的一个项目是用ExtJS做的,但在IE9下几乎完全不能用。 ... -
UI讨论
2013-05-22 15:27 7651.公司如果要研发自己的UI框架,JQuery和EXT该如何选 ... -
Extjs组件render说明与Demo
2013-05-02 16:05 17021.调用组件的render方法 panel.render ...
相关推荐
6. **绝对定位的子孙元素**:这是导致`overflow:hidden`失效的一个关键原因。如果子孙元素设置了`position:absolute`,它的包含块不再仅仅是父元素,而是最近的具有非`static`定位的祖先元素(通常是视口或`body`)...
需要注意的是,某些旧版本的浏览器,如IE6和IE7,可能需要将`overflow: hidden;`设置在`html`元素上,而不是`body`元素上,才能有效地隐藏滚动条。根据上述方法,我们可以在兼容性要求较高的项目中,为旧浏览器做...
IE-6浏览器对于1px高的块级元素有渲染问题,这种情况下,通过设置overflow:hidden可以使得元素能够正确地渲染为1px的高度。例如: ```css .line{height:1px;background-color:#ccc;overflow:hidden;} ``` 4. 创建...
然而,在某些特定情况下,尤其是在旧版本的Internet Explorer(如IE8)中,`body { overflow:hidden; }` 的样式可能无法正常工作,导致滚动条仍然可见。 这个问题主要源于IE8对CSS规范的不完全支持。IE8使用的是...
- **问题描述**:在IE6/7中,设置`body { overflow: hidden; }`后,并不能真正隐藏滚动条。 - **解决方案**:通过设置`html { overflow: hidden; }`来确保滚动条被正确隐藏。 ##### 3. **HasLayout属性的高度问题**...
在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 ◎ width:600px; 在所有浏览器中图片的大小为600px; ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。 ◎ overflow:hidden; 超出的部分隐藏...
- IE6和IE7支持`overflow: auto;`和`overflow: hidden;`,但不支持`overflow-x`和`overflow-y`,所以你需要分别定义水平和垂直滚动条: ```css body { _overflow-x: hidden; /* IE6 */ *overflow-x: hidden; /*...
高度通常允许自适应,但在某些情况下,可能需要使用`overflow:hidden`触发IE的`layout`属性,如`.colwrapper{overflow:hidden; zoom:1;}`。 总之,要实现跨浏览器的CSS兼容性,需充分理解不同浏览器的解析差异,...
溢出隐藏 就是隐藏超出规定高度的文本或者图像...overflow: hidden;} </style> </head> <body> 元素中的内容超出了给定的宽度和高度属性,overflow属性 可以确定显示的方式,以及是否显示滚动条
### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中,浏览器兼容性一直是开发者面临的重大挑战,尤其是处理早期版本的Internet Explorer(IE6和IE7)与现代浏览器如Firefox之间的差异。本文将...
#### 三、IE6/IE7/IE8下的CSS技巧 1. **Hack技巧**:通过使用特殊的CSS Hack技巧,可以实现让特定版本的IE浏览器使用不同的样式规则。 - **IE6 Hack**: ```css *html #element { /* IE6样式 */ } ``` - **IE7...
【CSS浏览器兼容性问题(IE6,IE7,IE8和Firefox)】 在网页开发中,CSS(层叠样式表)的浏览器兼容性是设计师和开发者必须面对的一大挑战。尤其在处理IE6、IE7、IE8以及Firefox等不同浏览器时,由于各浏览器对CSS规范...
标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”,这揭示了在Web开发中,尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时,开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为,...
需要注意的是,text-overflow属性在IE6+浏览器中是作为一个专有属性,它并不被所有浏览器支持。开发者在使用时需注意兼容性问题。 对于表格而言,table对象中的td元素溢出行为也受到overflow属性的影响。如果table-...
- IE6/7: `width` 2. **特殊Hack**: 为了确保在所有浏览器中盒子的尺寸一致,可以采用以下Hack方法: ```css #box { width: 600px; // for ie6.0 -w\idth: 500px; // for ff+ie6.0 } #box { width: 600px !...
### IE6特有bug兼容性问题整理 #### 1. 浮动(float)与相邻非浮动元素的表现差异 - **问题描述**: 在不同浏览器中,对于`float`元素和相邻非`float`元素的处理方式存在差异。具体表现为,在IE6中,当一个元素设置...
1. **解决外边距重叠问题**:通过设置 `overflow: hidden` 属性,可以使元素创建一个新的BFC,从而避免其内部元素与外部元素的外边距发生重叠。 2. **清除浮动**:同样,设置 `overflow: hidden` 可以使父元素创建一...
overflow: hidden; display: flex; align-items: center; justify-content: center; }body,html { height: 100%; width: 100%; margin: 0; padding: 0;}svg{ width:90%; height:90%; visibility:hidden; }.sparkle...