炒冷饭系列之IE Bug(6) —— IE躲猫猫Bug

偏头痛差点要了我的命,不过这依然不能拖慢我炒冷饭的步伐。今天带来一个非常经典的IE Bug —— 躲猫猫(Peekaboo Bug)。这个Bug主要出现在IE6和IE7里。在看一个国外文档时看到一个作者说IE7自从06年就修复了这个Bug,具体不得知,但在我的例子中IE7还是会出现的。

先讲下出现Bug的环境:一个拥有背景色或者背景图片的容器中,有一个浮动元素以及一个不浮动的元素,最后有一个清除双边浮动的元素,三个元素均不设置宽高,当底部清除浮动的那个元素更靠近上面的浮动元素时,则触发这一Bug。具体表现在:IE6、7中没有浮动的那个元素内容显示不出来,但当你重新刷新一下或者点开另外一个窗口然后再回到原来这个窗口时,内容就会重新显示出来。就我本人测试来看,在不显示内容的区域用鼠标拖选也可以把内容显示出来,或者直接CTRL+A全选一样可以达到效果。

html代码:

 
<div id="container">
	<div id="left">
		左边的内容<br />
		左边的内容<br />
		左边的内容<br />
		左边的内容<br />
		左边的内容
	</div>
	<div id="right">
		右边的内容<br />
		右边的内容<br />
		右边的内容<br />
		右边的内容<br />
		右边的内容<br />
		右边的内容
	</div>
	<div id="clear"></div>
</div>

css代码:

 
#container {
	background-color: yellow;
	border: 2px solid green;
}
#left {
	border: 2px solid red;
	float: left;
}
#right {
	border: 2px solid blue;
}
#clear {
	clear: both;
}

如你所见,我在左浮动的left元素里放了五行内容,而在不浮动的right元素里放了六行内容,这样的话,clear元素更靠近非浮动的那个元素,违背了我们文章开头提及的触发条件,所以这时候无论哪个浏览器都会正常显示。

正常显示

这时候我们来触发“躲猫猫”,我们通过padding-bottom来撑开left元素的高度,让底部元素更靠近left。给left元素添加 padding-bottom: 50px; 我们先来看看现代浏览器的显示:

依然正常显示效果

再来看看IE6、7的表现:

IE躲猫猫显示效果

是不是右边的内容不见了,这个时候我们切换到其他窗口再回来,尝试一下,是不是发现内容又出来了?当然刷新也有这种效果。OK,现在我们来介绍修复“躲猫猫”Bug的方法。

方法1去掉背景颜色或者背景图片。确实有效果,但是有时候我们确实需要背景颜色以及背景图的时候这招就不能使用了。

方法2:给容器以及浮动的元素分别添加position属性

#container { position:relative;}
#left { position:relative;}

方法3触发容器的haslayout,触发条件有很多,比如添加宽高,或者zoom:1等都可以。

方法4给容器添加一个line-height属性,比如:

#container { line-height:1.1;}

其实消灭掉这个Bug要从我们自身做起,在写代码的时候,尽量保证框架清晰简洁,不要动不动就一个div嵌套另一个div,尤其多重嵌套的时候很容易出现意想不到的困难,尽可能少的嵌套也更便于我们来控制样式。