html - IE7 中的行内块元素之间没有空格

Question

考虑以下代码：

HTML：

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

CSS：

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

在 IE8 以及其他现代浏览器中，divs 之间有一个空格：

但是，在 IE7 中，divs 是彼此相邻的。它们之间没有空间。

我怎样才能确保 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 仅部分支持 inline-block。基本上，IE6 和 IE7 仅在默认情况下显示“内联”的元素上支持内联块。

Divs 默认显示是块，所以 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>