IE6背景位置与精灵

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

<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开始之前大约相同数量的像素空白。

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

感谢

来源

2011-05-03 Andy

你需要添加一个overflow：hidden property吗？ – Zac 2011-05-03 21:37:19

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

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

来源

2011-05-03 21:32:26

谢谢，这是做到了。我根本不明白这一点：\为什么会溢出：隐藏改变图像的位置？ – Andy 2011-05-03 21:45:10

@Andy：'overflow：hidden'不会改变图像的位置，但它确实告诉IE不要试图保留'div'内的任何文本的空间（这就是为什么它是大约8px而不是4px ）。所以一旦“div”处于正确的高度，图像也处于正确的位置。 – 2011-05-03 21:51:39

谢谢@ herman-schaaf - 非常感谢 – Andy 2011-05-03 22:05:28

IE6背景位置与精灵

回答

相关问题