1

我有一个网页，我在其中将 div 与 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 之后的其他行保持一致。

4

5 回答 5

6

编码：

 display: inline-block;

将显示空格，您必须添加一个浮点数才能让它们直接一个接一个地出现。

尝试添加：

float:left;

到您的#sub11 等。

于 2013-05-14T13:29:00.170 回答
1

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

#sub11, #sub12, #sub21, #sub22 {
    display: inline-block;
    font-size: 0;
    margin-left: -4px;
 }
于 2013-05-14T13:32:08.653 回答
1

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>
于 2013-05-14T13:34:12.473 回答
0

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

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

这解决了我奇怪的问题。

于 2013-05-14T16:22:19.863 回答
0

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

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

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

于 2013-05-14T17:44:19.427 回答