在IE7 inline-block的元素之間沒有空間

Question

Consider the following code:

HTML：

<div>Hello</div> 
<div>Stack</div> 
<div>Overflow</div> 

CSS：

div { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    background-color: #ccc; 
} 

在IE8中，以及在其他現代瀏覽器，有一個空格div s：

但是，在IE7中，div彼此相鄰。他們之間沒有空間。

我怎樣才能確保IE7有這個空間？

Answer 1

您可以添加自己的空間只有IE7和更低：

div { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    *margin-right: 0.25em; 
    background-color: #ccc; 
} 

或者這樣：

div + div { 
    *margin-left: 0.25em; 
} 

Answer 2

下面是在空間/ inline-block的問題的一些背景：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

這樣你就可以實現這些補丁中的一個（把空格去掉），然後specifiy保證金值。或者，你可以簡單地把它們飄浮並指定一個臨界值，而不是：

div { 
    background-color: #ccc; 
    float: left; 
    margin-right:5px; 
} 

Answer 3

IE7只支持內聯塊。基本上，IE6和IE7僅支持在默認情況下顯示「內聯」的元素的內聯塊。

Div的默認顯示是塊，所以IE7忽略你的內聯塊，只讀取內聯，因此沒有空間問題。

要修復它，您可以嘗試在元素之間添加非破壞性空白區域（ ），儘管它會讓您在舊版瀏覽器和新瀏覽器之間出現不一致的行爲，因爲後面元素之間的間距較大（  +餘量） 。

Answer 4

看來，IE7（及更早版本）會在'inline-block'元素之前插入一個空格（如果標記中有空白），如果它前面有一些文本（一個不間斷的空格），即使該文本有display:none;（儘管它在下面的任何文本之前不會在'內嵌塊'之後插入一個空格），也會這樣做。

所以到OP的解決方案，這將始終如一地呈現跨瀏覽器會因此改變HTML：

<div>Hello</div> 
<!--[if lte IE 7]><span style='display:none;'>&nbsp;</span><![endif]--> 
<div>Stack</div> 
<!--[if lte IE 7]><span style='display:none;'>&nbsp;</span><![endif]--> 
<div>Overflow</div>