overflow:auto在ie6/7上的诡异？？

     今天在小欧老师那看到一篇文章《overflow:auto;在IE6/7下诡异事件》,自己跟着去验证到底是不是这么回事？结果发现虽然是有这样的诡异，但令我百般不解的是，老师为何要在.list上既然用了float：left；为何还要用position：relative；呢？？而且解决诡异之事竟然是在.prd_box上再次用到position：relative？？好吧，我们先看看老师是怎么做的：

html代码：

<div class="prd_box">
		<ul class="pre_list">
		    <li class="fix_1 list"></li>
		    <li class="fix_2 list"></li>
		    <li class="fix_3 list"></li>
		    <li class="fix_4 list"></li>
		   <li class="list clearfix"></li>
		</ul>
</div>

css代码（li的背景图就省略了）：

.prd_box{
		width: 600px;
		height:300px;
		border:1px solid red;
		background-color: gray;
		overflow: auto;
	}
	.prd_box,.prd_list{
		padding: 15px 0 0;
	}
	.list{
		width:166px;
		height: 168px;
		float: left;
		display: inline;
		margin:0 0 0 -1px;
		border:0;
		position: relative;
	}
	.clearfix{
		clear: both;
	}

在现代浏览器上及IE8或以上的显示正常的效果截图：

在IE6/7下的显示效果截图如下：

从效果对比上可以看出IE上显示不正常，但这也不能说是ie的bug，后来老师在.prd_box上加上position：relative后效果与现代浏览器上的一样，解决了这个诡异，但我还是想不明白，如果有那个面们知道，请告知我一声。

后来我想想，还是搞不明白为什么要在.list上用position：relative；呢？我尝试着把它去掉（当然.prd_box上也不加position：relative；），神奇的事就发生了，无论在现代浏览器上还是各大IE上都显示正常？？无解ing~~~~