带有精灵的 IE6 背景位置

发布于 2024-11-05 01:43:01 字数 790 浏览 1 评论 0原文

我有一个带有两个图像的精灵，顶部和底部圆形边框用于某些功能框。一些 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 开始之前，其下方有相同数量的像素空白。

以前有人经历过吗？任何反馈表示

感谢

原文

I have a sprite with two images, top and bottom rounded borders for some feature box. Some example HTML:

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

And the 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;}

In FF 3 and 4, Chrome, IE 7, 8 and 9 it displays as it should, with the .top and .bottom divs "hugging" the middle div to create a box effect.

However, in IE6, the .top div shows the whole background image and seems to have increased it's height somehow, even though the developer toolbar is telling me the height is 4px, it clearly isn't as it shows the whole 8px image then roughly the same amount of pixels whitespace below it before the middle div starts.

Has anybody experienced this before? Any feedback appreciated

Thanks

分享到QQ

分享到微博