IE overflow:hidden失效的解決方法

2024-07-11 08:26:33

字體：大中小

供稿：網(wǎng)友

overflow:hidden失效
當(dāng)父元素的直接子元素或者下級(jí)子元素的樣式擁有position:relative屬性時(shí)，父元素的overflow:hidden屬性就會(huì)失效。
我們?cè)贗E 6內(nèi)發(fā)現(xiàn)子元素會(huì)超出父元素設(shè)定的高度，即使父元素設(shè)置了overflow:hidden。
解決這個(gè)bug很簡(jiǎn)單，在父元素中使用position:relative;即可解決該bug

我的辦法：子元素設(shè)置絕對(duì)定位，父元素相對(duì)定位，這樣overflow:hidden就不會(huì)失效了。

IE下CSS溢出隱藏失敗(IE overflow:hidden失效)

復(fù)制代碼

代碼如下:
<div id="slides-pic">
<div>
<p class="hot" >
<a class="hot-2" target="_blank"><img src="images/slide_2.gif" /></a></p>
<p class="main" ><a target="_blank"><img src="images/slide_3.gif" /></a></p>
</div>
<div>
<a href="css-112.jpg" target="_blank">
<img src="images/slide2.jpg" title="" alt="這是第二張圖片" />
</a>
</div>
<div>
<a href="css-112.jpg" target="_blank">
<img src="images/slide2.jpg" title="" alt="這是第二張圖片" />
</a>
</div>
<div>
<p class="hot" ><a class="hot-1" style="clear:both" href=""><img src="images/slide_1.gif" /></a>
<a class="hot-2" href=""><img src="images/slide_2.gif" /></a></p>
<p class="main" ><a href=""><img src="images/slide_3.gif" /></a></p>
</div>
</div>

kaluli新版首頁的slide項(xiàng)目中出現(xiàn)了一個(gè)問題，在FireFox下顯示正常，但是在IE下所有圖片都顯示出來，不能實(shí)現(xiàn)溢出隱藏。后來搜到是 <div id=”slides-pic”>的子節(jié)點(diǎn)<div>的問題，這個(gè)節(jié)點(diǎn)中使用了position:relative造成顯示異常，解決辦法是在父節(jié)點(diǎn)容器中也加一個(gè)position:relative。

position的相對(duì)和絕對(duì)應(yīng)一起搭配起來才比較合適，不然會(huì)出現(xiàn)莫名其妙的問題。另：position和float在IE6下是無法一起使用的，所以有時(shí)候會(huì)hidden失效。

上一篇：CSS 網(wǎng)頁布局排版實(shí)例

下一篇：老調(diào)重彈的CSS優(yōu)先級(jí)