Question

我有一个网页，我将div与div-block属性叠加在一起。但是，它只在Firefox中的两个div之间增加了额外的间距。该设计在Safari和Chrome中保持一致。

以下是样本fiddle。

#main {
    display: block;
}
#sub11, #sub12, #sub21, #sub22,  #sub31, #sub32 {
    display: inline-block;
    background:red;
    padding:0;
    //margin-right:-4px;
    margin-top:3px;
    margin-bottom:3px;
}

Firefox在GHI和TRY行之间添加额外空间，而ABC和GHI与TRY之后的其他行一致。

Answer 1

代码：

 display: inline-block;

显示空格，你必须添加一个浮动，让它们直接相互显示。

尝试添加：

float:left;

到＃sub11等。

Answer 2

我已经看过这个问题了十几次关于css-tricks的广泛文章。这个问题是当你使用display：inline-block时，它通常用于段落的空格元素，现在常用于内联对象。最好的解决方法是你的css添加这个-4 margin-left它应该修复它。（当然很脏）。

#sub11, #sub12, #sub21, #sub22 {
    display: inline-block;
    font-size: 0;
    margin-left: -4px;
 }

Answer 3

内联块将尊重元素之间的空白区域。最简单的方法是在您的内嵌元素之间添加注释标记

http://jsfiddle.net/YuMuC/1/

<div id="main">
    <div id="sub1">
        <div id="sub11">
            <div><h4>ABC</h4></div>
            <div>123</div>
        </div><!--
        --><div id="sub12">
            <div><h4>DEF</h4></div>
            <div>456</div>
        </div>
    </div>
   <div id="sub2">
        <div id="sub21">
            <div><h4>GHI</h4></div>
            <div>745</div>
        </div><!--
        --><div id="sub22">
            <div><h4>JKL</h4></div>
            <div>987</div>
        </div>
    </div>

</div>

Answer 4

我专门为这一行使用了以下css修复

@-moz-document url-prefix() {
    #myRowID {margin-top:-5px;}
}

这解决了我的奇怪问题。

Answer 5

这实际上是按预期工作的。由于显示为inline-block的元素应该与文本流一起使用，因此标记中的空格将被视为输出。

通过注释掉标记中的空白区来解决这个问题，或者简单地将它们全部一起删除，就像这样。

您显然也可以继续将它们显示为block和float。

内联块在firefox中添加额外空间

5 个答案: