在firefox中添加额外空间的行内块

Question

我有一个网页，我已经堆叠了我的div's与inline-Block属性。但是，它只在Firefox中的两个div之间添加额外的间距。这个设计在Safari和Chrome中是一致的。

这是一个示例小提琴

#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; 

Answer 2

这个问题我已经见过很多次了，有一篇关于css技巧的文章。这个问题是当你使用display: inline-block时，它通常用于段落的空间元素，现在通常用于内联对象。最好的修复是在你的css上添加-4 margin-left，它应该修复它。(当然是脏的)

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

Answer 3

inline-block将尊重元素之间的空白。最简单的方法是在行内元素

之间添加注释标签。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。