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="images/img01.jpg" /><span>洗浴</span>
<img class="border" src="images/border.png" />
</a>
<a href="#">
<img src="images/img02.jpg" /><span>健身</span>
<img class="border" src="images/border.png" />
</a>
<a href="#">
<img src="images/img03.jpg" /><span>餐饮</span>
<img class="border" src="images/border.png" />
</a>
<a href="#">
<img src="images/img04.jpg" /><span>娱乐休闲娱闲</span>
<img class="border" src="images/border.png" />
</a>
<a href="#">
<img src="images/img05.jpg" /><span>客房</span>
<img class="border" src="images/border.png" />
</a>
<a href="#">
<img src="images/img01.jpg" /><span>SPA会馆</span>
<img class="border" src="images/border.png" />
</a>
<a href="#">
<img src="images/img01.jpg" /><span>SPA会馆</span>
<img class="border" src="images/border.png" />
</a>
<a href="#">
<img src="images/img01.jpg" /><span>SPA会馆</span>
<img class="border" src="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。
by:http://hi.baidu.com/luoxiandong99/item/5b9e31ecdbe9141a560f1d5c
posted on
