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

來源:互聯網
上載者:User

今天我們做一個商城實現時利用了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;}

即可


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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.