IE7中的内联块元素之间没有空格

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

以下是有关空格/内联块问题的背景知识：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

因此，您可以实现其中一个修复（删除空格），然后指定边距值。或者，您可以简单地浮动它们并指定边距值：

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

Answer 3

IE7仅对内联块有部分支持。基本上IE6和IE7仅支持默认情况下显示为“内联”的元素的内嵌块。

Divs默认显示是阻止，因此IE7忽略你的内联块，只读取内联，因此没有空格问题。

要修复它，您可以尝试在元素之间添加不间断的空格（ ），尽管它会在旧浏览器和新浏览器之间提供不一致的行为，因为在稍后元素之间的空间更大（{ {1}} +保证金）。

Answer 4

似乎IE7（及更早版本）会在'inline-block'元素之前插入一个空格（如果标记中有空格），如果它前面有一些文本（一个不间断的空格就可以），并且即使该文本具有display:none; ，也会这样做（尽管在任何文本跟随之前它不会在'inline-block'之后插入空格）。

因此，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>