Firefox/Gecko 在行内块 div 周围添加间距？

Question

我知道我正在寻找的真正目标是 css 圣杯，但在这个非常简单的实验中，我得到了“幻影”间距，我希望有人能解释一下。

以下情况发生在 Firefox 中，但不在 Chrome 中（尽管 Chrome 有它自己的问题，我稍后会解决）：

HTML：

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS：

#wrapper {
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 250px;
    height: 90px;
    background-color: red;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

请注意，我使用了背景色而不是边框​​，因此不会出现任何框间距问题（据我所知）。

如果我在 Firebug 中检查每个 div（外部和内部），宽度是正确的，但每个 div 和第三个 div 之间显然存在间隙。

直到我将宽度设置为 761px，每个 div 在每个内部 div 和最后一个 1-2 像素之间的间隙约为 3-4 像素，才会发生这种情况。

所以在所有边距、填充和边框都关闭的情况下，这个间距是从哪里来的，有没有办法（没有浮动或负边距）将此间距设置为 0？

我认为也许 Firefox 正在应用内联属性，例如 word-spacing 或 letter-spacing，但我也尝试将所有这些都关闭。

有人知道这个空间是从哪里来的吗？

Answer 1

将font-size:0; 定义为其父级DIV。像这样写：

#wrapper {
    font-size:0;
    width: 760px;
    height: 100px;
    background-color: yellow;
}

#wrapper div{
 font-size:15px;
}

查看http://jsfiddle.net/CXr5A/

或

你可以像这样在一行中写下你的内部 div：

<div id="wrapper">
    <div id="div1"></div><div id="div2"></div><div id="div3"></div>
</div>

检查这个http://jsfiddle.net/CXr5A/2/

Answer 2

这与font-size 有关。如果您想知道正确的方法来完成您尝试过的事情，请改用此 CSS 并试一试。

提示：始终养成在启动 CSS 文件之前应用全局重置的习惯。

CSS：

*{
    padding: 0px;
    margin: 0px;

}

#wrapper {
    width: 750px;
    height: 100px;
    background-color: yellow;

}

#wrapper div {
    width: 250px;
    height: 90px;
    display: block;
    float: left;
    background-color: red;
    font-size:15px;
}

#wrapper #div1 {
    background-color: red;
}

#wrapper #div2 {
    background-color: green;
}

#wrapper #div3 {
    background-color: red;

}

Answer 3

去掉 HTML 中的空格。那会解决你的问题。

<div id="wrapper">
<div id="div1"></div><div id="div2"></div><div id="div3"></div>
</div>​

您可以改为添加div{margin-right: -4px;}

this article 中的更多信息。

fiddle.