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背景位置與精靈

回答

相關問題