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

產生原因：

當父元素的直接子項目或者下級子項目的樣式擁有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都有問題的解決辦法。

是不是發現了問題，下面看看My Code

代碼如下

複製代碼

<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;}

即可

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