IE7的overflow失效的解决方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

IE7的position:relative bug
今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug，特此记录！解决方法很简单，给父层（div#scroll）设置position:relative就OK了。
XHTML结构：
<div id="scroll" class="list">
<a href="#">
<img src="data:images/img01.jpg" />洗浴
<img class="border" src="data:images/border.png" />
</a>
<a href="#">
<img src="data:images/img02.jpg" />健身
<img class="border" src="data:images/border.png" />
</a>
<a href="#">
<img src="data:images/img03.jpg" />餐饮
<img class="border" src="data:images/border.png" />
</a>
<a href="#">
<img src="data:images/img04.jpg" />娱乐休闲娱闲
<img class="border" src="data:images/border.png" />
</a>
<a href="#">
<img src="data:images/img05.jpg" />客房
<img class="border" src="data:images/border.png" />
</a>
<a href="#">
<img src="data:images/img01.jpg" />SPA会馆
<img class="border" src="data:images/border.png" />
</a>
<a href="#">
<img src="data:images/img01.jpg" />SPA会馆
<img class="border" src="data:images/border.png" />
</a>
<a href="#">
<img src="data:images/img01.jpg" />SPA会馆
<img class="border" src="data:images/border.png" />
</a>
</div>
CSS样式：
#scroll{
position:relative;
width:500px;
overflow:hidden;
padding-top:14px;
white-space:nowrap;
}
#scroll a{
position:relative;
display:inline-block;
overflow:hidden;
padding:08px;
color:#636361;
text-align:center;
}
#scroll img{
width:84px;
height:84px;
}
#scroll span{
display:block;
width:84px;
padding-top:8px;
white-space:nowrap;
text-overflow:ellipsis;
}
#scroll a:hover{color:#FFF;}
#scroll.border{
position:absolute;
left:8px;
top:0;
}
#scroll a:hover .border{display:none;}
这个bug存在于IE7中，当div#scroll中的a设置position:relative;时，div#scroll的内容超过本身width时，div#scroll在IE7中会出现异常，具体表现为overflow:hidden失效，另外还会导致JS实现的图片滚动在IE7中失效。
解决方法很简单，给父层（div#scroll）设置position:relative。