炒冷饭系列之IE Bug(7) —— overflow:auto时的溢出

这个Bug出现在IE6、7中,当一个设置了相对定位的元素包裹在设置了overflow:auto 的容器中时,相对定位的元素在现代浏览器中会被裁剪,通过下拉滚动条可看到全部,而在IE6、7中则会出现里容器的元素超过容器的部分会溢出来,滚动条并未发生任何作用。

html代码:

 
<div id="container">
	<div id="box"></div>
</div>


css代码:

 
#container {
	width: 200px;
	height: 100px; 
	border: 1px solid #555;
	background-color: #aae;
	overflow: auto;
 
}
#box {
	width: 120px;
	height: 110px;
	background-color: #333;
	margin: 0 30px;
	position: relative;
	margin: 25px;
}

现代浏览器的显示效果:

正常显示的效果

IE6、7中的显示效果:

IE里发生了溢出

解决溢出的方法很简单,为容器设置相对定位即可。

#container { position: relative;}