为什么 inline-block 的渲染与 firefox 中的 inline 不同？答案

【问题标题】：Why inline-block have different rendering than inline in firefox?为什么 inline-block 的渲染与 firefox 中的 inline 不同？
【发布时间】：2014-07-31 17:18:44
【问题描述】：

朋友们，

我的问题是，如果我使用 display: inline-block，为什么 Firefox 会在框下方添加额外的像素（填充）？

让我们看看这里有什么：http://jsfiddle.net/xbU5s/9/

HTML - 两个完全相同的元素。

<div class="wrap">
    <section class="ib">Hello world</section>
    <section class="il">Hello world</section>
</div>

CSS - 一切都一样，但我们的第一部分是 inline-block，第二部分是 inline。

.wrap { font-size: 0; }

.ib { display: inline-block; }
.il { display: inline; margin-left: 10px; }

section {
    background: #000; border-radius: 3px; color: #fff; font-size: 11px; font-family: Sans-serif;
    padding: 3px 5px; 
}

这是我们的 1px 填充：

显示：内联块；与显示：内联；

只是呈现故障（因为它只发生在 firefox 中）还是我对 inline-block 的行为有误解？

【问题讨论】：

其实这也发生在 Chrome 中（我用的是 36.0）。 ib的高度为20px，il的高度为18px。
What is the difference between display: inline and display: inline-block?的可能重复
我无法在最新的 Chrome (windows) 上复制这个，对我来说都是 20px。
@MarmiK 嘿，我不太明白你想要什么。我在 jsfiddle 中发布了这个“故障”。
@mrmoment 这很奇怪，它在 Chrome 36.0（20px 高度）和 Canary 38.0 中与我完全相似

标签： html firefox css

【解决方案1】：

也许old post这里已经解释了答案

我想清除差异..

如果元素的样式为display:inline，则样式将对象限制在line-height。

但是，当block 带有inline 时，相同的行为会发生变化。

它是内联的，但带有块它会扩展到可能的高度或宽度。

为了改变。选择两个框中的文本，您将看到第二个框正在选择框外。那是line-height 的溢出，它受内联限制，但使用内联块时，它会随着padding + line-height 引起的overflow 而增长

我认为这将消除大部分疑问，请参阅旧帖子了解更多详细信息。

【讨论】：