css - 带有 Sprite 的 IE6 背景位置

Question

我有一个带有两个图像的 Sprite ，顶部和底部的圆形边框用于某些功能框。一些示例 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、Chrome、IE 7、IE 8 和 9 中，它会正常显示，.top 和 .bottom div“拥抱”中间的 div 以创建盒子效果。

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

有没有人遇到过这种情况？感谢任何反馈

谢谢

Answer 1

您需要做的就是添加一个overflow: hidden 属性。

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