1. 程式人生 > >IE6 BUG overflow:hidden失效

IE6 BUG overflow:hidden失效

當父元素的直接子元素或者下級子元素的樣式擁有position:relative屬性時,父元素的overflow:hidden屬性就會失效。
詳細出處參考:http://www.jb51.net/css/28583.html

下面就是我所收集或遇到的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 href="http://www.baidu.com/">百度</a>

</div>
</div>

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

即css


複製程式碼程式碼如下:
#parent{height:50px;overflow:hidden;position:relative;}
#child a{position:relative;}