我有一个带有两个图像的精灵，一些功能框的顶部和底部圆形边框。一些示例 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、8 和 9 中，它按应有的方式显示，其中 .top 和 .bottom div“拥抱”中间 div 以创建盒子效果。
但是，在 IE6 中，.top div 显示了整个背景图像，并且似乎以某种方式增加了它的高度，即使开发人员工具栏告诉我高度是 4px，它显然不是因为它显示了整个 8px 图像然后大致在中间 div 开始之前，它下面的相同数量的像素空白。
以前有人经历过吗？任何反馈表示赞赏
谢谢