`

IE6,IE7下设置body{overflow:hidden;}失效Bug

    博客分类:
  • UI
阅读更多
问题重现:
<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; }
分享到:
评论

相关推荐

    一个通俗小故事告诉你溢出隐藏(overflow:hidden)失效的原因

    6. **绝对定位的子孙元素**:这是导致`overflow:hidden`失效的一个关键原因。如果子孙元素设置了`position:absolute`,它的包含块不再仅仅是父元素,而是最近的具有非`static`定位的祖先元素(通常是视口或`body`)...

    使用overflow: hidden来禁用页面滚动条

    需要注意的是,某些旧版本的浏览器,如IE6和IE7,可能需要将`overflow: hidden;`设置在`html`元素上,而不是`body`元素上,才能有效地隐藏滚动条。根据上述方法,我们可以在兼容性要求较高的项目中,为旧浏览器做...

    CSS--overflow:hidden在项目实例中使用心得分享

    IE-6浏览器对于1px高的块级元素有渲染问题,这种情况下,通过设置overflow:hidden可以使得元素能够正确地渲染为1px的高度。例如: ```css .line{height:1px;background-color:#ccc;overflow:hidden;} ``` 4. 创建...

    ie8 body overflow hidden 无效的解决方法

    然而,在某些特定情况下,尤其是在旧版本的Internet Explorer(如IE8)中,`body { overflow:hidden; }` 的样式可能无法正常工作,导致滚动条仍然可见。 这个问题主要源于IE8对CSS规范的不完全支持。IE8使用的是...

    ie特有bug文档

    - **问题描述**:在IE6/7中,设置`body { overflow: hidden; }`后,并不能真正隐藏滚动条。 - **解决方案**:通过设置`html { overflow: hidden; }`来确保滚动条被正确隐藏。 ##### 3. **HasLayout属性的高度问题**...

    JS+css 图片自动缩放自适应大小

    在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 ◎ width:600px; 在所有浏览器中图片的大小为600px; ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。 ◎ overflow:hidden; 超出的部分隐藏...

    IE祛滚动条的Demo

    - IE6和IE7支持`overflow: auto;`和`overflow: hidden;`,但不支持`overflow-x`和`overflow-y`,所以你需要分别定义水平和垂直滚动条: ```css body { _overflow-x: hidden; /* IE6 */ *overflow-x: hidden; /*...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    高度通常允许自适应,但在某些情况下,可能需要使用`overflow:hidden`触发IE的`layout`属性,如`.colwrapper{overflow:hidden; zoom:1;}`。 总之,要实现跨浏览器的CSS兼容性,需充分理解不同浏览器的解析差异,...

    css overflow: hidden 的用法(溢出隐藏及清除浮动)

    溢出隐藏 就是隐藏超出规定高度的文本或者图像...overflow: hidden;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; 元素中的内容超出了给定的宽度和高度属性,overflow属性 可以确定显示的方式,以及是否显示滚动条

    CSS完美兼容IE6IE7FF的通用方法

    ### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中,浏览器兼容性一直是开发者面临的重大挑战,尤其是处理早期版本的Internet Explorer(IE6和IE7)与现代浏览器如Firefox之间的差异。本文将...

    div错位解决IE6IE7IE8样式不兼容问题

    #### 三、IE6/IE7/IE8下的CSS技巧 1. **Hack技巧**:通过使用特殊的CSS Hack技巧,可以实现让特定版本的IE浏览器使用不同的样式规则。 - **IE6 Hack**: ```css *html #element { /* IE6样式 */ } ``` - **IE7...

    CSS浏览器兼容性问题(IE6,IE7,IE8和Fixfox)

    【CSS浏览器兼容性问题(IE6,IE7,IE8和Firefox)】 在网页开发中,CSS(层叠样式表)的浏览器兼容性是设计师和开发者必须面对的一大挑战。尤其在处理IE6、IE7、IE8以及Firefox等不同浏览器时,由于各浏览器对CSS规范...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”,这揭示了在Web开发中,尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时,开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为,...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    需要注意的是,text-overflow属性在IE6+浏览器中是作为一个专有属性,它并不被所有浏览器支持。开发者在使用时需注意兼容性问题。 对于表格而言,table对象中的td元素溢出行为也受到overflow属性的影响。如果table-...

    CSS兼容IE6,IE7,FF的技巧

    - 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兼容性问题整理

    ### IE6特有bug兼容性问题整理 #### 1. 浮动(float)与相邻非浮动元素的表现差异 - **问题描述**: 在不同浏览器中,对于`float`元素和相邻非`float`元素的处理方式存在差异。具体表现为,在IE6中,当一个元素设置...

    前端面试必备最新八股文(基础+进阶内容)2024年最新.docx

    1. **解决外边距重叠问题**:通过设置 `overflow: hidden` 属性,可以使元素创建一个新的BFC,从而避免其内部元素与外部元素的外边距发生重叠。 2. **清除浮动**:同样,设置 `overflow: hidden` 可以使父元素创建一...

    圣诞树效果3.html 使用前端代码实现圣诞树的动态绘制过程

    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...

Global site tag (gtag.js) - Google Analytics