IE6 Bug overflow:hidden失效

下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效

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

CSS代碼


復制代碼代碼如下:
#parent{height:50px;overflow:hidden;}
#child a{position:relative;}

HTML代碼

復制代碼代碼如下:
div id="parent"
div id="child"
a 百度/a

a 經驗啦網/a

a 服務器/a

a 查詢工具/a

a 軟件下載/a

a 源碼下載/a

/div
/div

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

即css


復制代碼代碼如下:
#parent{height:50px;overflow:hidden;position:relative;}
#child a{position:relative;}

相關經驗推薦