IE6背景位置与精灵

Question

我有一个精灵与两个图像，一些功能框的顶部和底部圆角边框。一些示例HTML：

<div class="box"> 
<div class="top"></div> 
<div class="middle">Content Here</div> 
<div class="bottom"></div> 
</div> 

而CSS：

.box {float:left;width:400px;} 
.top,.bottom {float:left;width:400px;height:4px;background-image:url(/images/boxborders.gif);} 
.bottom {background-position: 0 -4px;} 
.middle {float:left;width:398px;border-left:1px solid #333333;border-right:1px solid #333333;} 

在FF 3和4，铬，IE 7，图8和9显示它，因为它应该与赛拓朴和.bottom的div “拥抱”中间的div来创建一个盒子效果。

但是，在IE6中，.top div显示整个背景图像，并且似乎以某种方式增加了它的高度，即使开发人员工具栏告诉我高度是4px，但显然不是它显示整个8px图像，然后在中间div开始之前大约相同数量的像素空白。

有没有人经历过这个？任何反馈赞赏

感谢

Answer 1

所有你需要做的就是添加一个overflow: hidden财产。

http://jsfiddle.net/hVvNy/8/