1. 首頁 > 生活經驗 > >

IE overflow:hidden失效的解決方法

【IE overflow:hidden失效的解決方法】overflow:hidden失效
當父元素的直接子元素或者下級子元素的樣式擁有position:relative屬性時，父元素的overflow:hidden屬性就會失效 。
我們在IE 6內發現子元素會超出父元素設定的高度，即使父元素設置了overflow:hidden 。
解決這個bug很簡單，在父元素中使用position:relative;即可解決該bug

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

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

復制代碼代碼如下:
div id="slides-pic"
div
p class="hot"
a class="hot-2" target="_blank"img src="https://www.questions.com.cn/dnjc/images/slide_2.gif" //a/p
p class="main" a target="_blank"img src="https://www.questions.com.cn/dnjc/images/slide_3.gif" //a/p
/div
div
a target="_blank"
img src="https://www.questions.com.cn/dnjc/images/slide2.jpg" title="" alt="這是第二張圖片" /
/a
/div
div
a target="_blank"
img src="https://www.questions.com.cn/dnjc/images/slide2.jpg" title="" alt="這是第二張圖片" /
/a
/div
div
p class="hot" a class="hot-1" style="clear:both" href=""img src="https://www.questions.com.cn/dnjc/images/slide_1.gif" //a
a class="hot-2" href=""img src="https://www.questions.com.cn/dnjc/images/slide_2.gif" //a/p
p class="main" a href=""img src="https://www.questions.com.cn/dnjc/images/slide_3.gif" //a/p
/div
/div

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

position的相對和絕對應一起搭配起來才比較合適，不然會出現莫名其妙的問題 。另：position和float在IE6下是無法一起使用的 ， 所以有時候會hidden失效 。

相關經驗推薦