浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1( 四 ) _云知道

复制代码代码如下:
.demo {
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden;
}

八、overflow:auto与position:relative的碰撞
这个Bug也称作距出边界的Bug,而这个Bug 只出现在 IE6 和 IE7 中,有两个块元素,元素设置了 overflow: auto;子元素设置 position:relative 并且其高度大于父元素,在 IE6 和 IE7 中会产生一个比较难看的 Bug,也就是子元素块不被隐藏会溢出父元素块,而在 IE8 和 FF 还有 IE5.5 中又显示是正常,我们先来看看这个例子的效果:
HTML Markup

复制代码代码如下:
div id="wrap"
div id="subDiv" /div
/div

CSS Code

复制代码代码如下:
#wrap {
border: 1px solid red;
height: 150px;
width: 200px;
background: orange;
overflow: auto;
}
#subDiv {
border: 1px dotted blue;
background: lime;
height: 200px;
width: 150px;
position: relative;
}

浏览器中的效果

要解决这个难看的Bug 我们只要在父元素中也设置一个position:relative;属性,就会使 IE6 和 IE7 回复到正常状态。

复制代码代码如下:
#wrap {
border: 1px solid red;
height: 150px;
width: 200px;
background: orange;
overflow: auto;
position: relative;
}

这是一个overflow 在IE7~IE6 的bug,不单单只取值auto 会出现这个Bug,就是你设置overflow: hidden 也会出现这个Bug 。解决方法也是只要在父元素中加入一个position: relative;就 OK 了。

九、浮动层错位
当内容超出外包容器定义的宽度时会导致浮动层错位问题。在 Firefox、IE7、IE8 及其他标准浏览器里,超出的内容仅仅只是超出边缘;但在 IE6 中容器会忽视定义的 width 值,宽度会错误地随内容宽度增长而增长。如果在这个浮动元素之后还跟着一个浮动元素,那么就会导致错位问题
HTML Markup:

复制代码代码如下:
div id="container"
div id="left" http://net.tutsplus.com//div
div id="right" /div
/div

CSS Code

复制代码代码如下:
#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}
#left,
#right{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}

效果图

解决这样的bug没有什么好方法，只能在元素中加上overflow:hidden，将多出来的内容直接切掉，如：

复制代码代码如下:
#left { overflow: hidden; }

虽然可以使用 overflow:hidden;或 overflow:scroll;来修正,但 hidden 容易导致其他一些问题,scroll 会破坏设计。最好是使用固定布局或者是使用好宽度

十、IE6下躲猫猫
这个奇怪的 Bug 是 IE6 及其以下版本的,为什么起这样的一个名称,因为在某些情况下文本看起来消失了,重新刷新隐藏的部分才会再度出现。出现这个 Bug 的条件是:一个撑破了容器浮动元素后面紧跟着一些非浮动元素,并且非浮动元素中有一些定义了:hover 的链接,那么在 IE6 及其以下版中, 当链接在悬浮状态下就会触发这个奇怪而又无耐的Bug 。

解决这个Bug最好的方法就是清除浮动，因为他是由于浮动才产生的Bug 。有关于清除浮动的方法，大家可以参考《Clear Float 》。
上面主要搜集了10种Bug,可以说这几种都是经典的Bug 。希望这几种能给你今后的工作带来方便，让你在Bug还没出现之前就避免他的发生。那么第三站我们也要说ByeBye了，如果你天天需要面对这个讨厌的IE,小生建议你静下心来细细读完。对你会有所帮助的。如果你有更好的建议，也记得告诉我。或者在评论中给我留言。:)