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~~~~