IE6 Bug overflow:hidden无效

2021-03-12 19:07 jianzhan
下面便是我所搜集或遇到的IE6 Bug之1: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>

<a href="https://www.jb51.net/">脚本制作之家</a>

<a href="http://s.jb51.net/">服务器</a>

<a href="http://tools.jb51.net">查寻专用工具</a>

<a href="https://www.jb51.net/softs">手机软件免费下载</a>

<a href="https://www.jb51.net/codes">源代码免费下载</a>

</div>
</div>

大家在IE 6内发现子元素会超过父元素设置的高宽比,即便父元素设定了overflow:hidden。
处理这个bug很简易,在父元素中应用position:relative;便可处理该bug

即css


拷贝编码
编码以下:

#parent{height:50px;overflow:hidden;position:relative;}
#child a{position:relative;}