css ie6、ie7、ie8中overflow:hidden無效解決辦法

今天我們做一個商城實現時利用了overflow:hidden但是怎麼也達不到我們想的我效果，網上查了一下原來這是ie bug哦，下面我們來看處理辦法吧。
-
產生原因：

當父元素的直接子項目或者下級子項目的樣式擁有position:relative屬性時，父元素的overflow:hidden屬性就會失效。

解決辦法：

我們在IE 6內發現子項目會超出父元素設定的高度，即使父元素設置了overflow:hidden。
解決這個bug很簡單，在父元素中使用position:relative;即可解決該bug

ie7和ie6

發現在ie6和ie7裡面overflow:hidden無效,還是會超出外層div

後來在外層div上面加上position:relative就解決了

暫時加*號hack掉吧,有時間再研究一下到底是什麼原因導致的問題

好了，問題都說了，下面來看我解決我的實例吧。

ie6 ie7 ie8都有問題的解決辦法。

是不是發現了問題，下面看看我的代碼

代碼如下 複製代碼
<div class="product-pic album">
<div class="thumb">
<ul>
<li>
<div class="shop-detail-img-outer">
<div class="shop-detail-img">
<p>
<a title="" rel="{gallery:'gal1', smallimage: '312x312_39956512.jpg', largeimage : '39956512.jpg' }" href=" javascript: void(0)">
<img alt=" " src="45x45_39956512.jpg">
</a>
</p>
</div>
</div>
</li>
.........
</ul>
</div>
</div>

css 代碼如下

代碼如下 複製代碼
.album { display: block; }
.album .thumb { width: 100%; overflow: hidden; height: 62px;}
.album .thumb ul {margin: 0; padding: 0; width: 310px; height: 62px; overflow: hidden; display: block; }
.album .thumb ul li { float: left; margin: 5px 5px 5px 0px; list-style: none; }

一開始單獨拿出這段代碼發現沒有問題，認為是上下影響導致的，但不是，幾經波折，發現是設定overflow:hidden層裡有定位標籤的問題。 最後終於搞定。

解決方案：只需要在設定overflow:hidden層加入定位即可。 如在 .album .thumb ul中加入

代碼如下 複製代碼
{position:relative;left:0px;top:0px;}

即可

哈哈，終於搞定了，不過我們以前還真沒仔細看這個問題，保留希望有需要的朋友可以參考一下。