最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一下:
设置body{overflow:hidden;}:IE6 IE7下不生效。IE6下横向纵向滚动条都在,IE7下纵向滚动条还在;
分析原因:
chrome、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的overflow的值来解决IE6和IE7下的存在的这个问题;
分享到:
相关推荐
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...