为什么内联块在Firefox中具有与内联不同的渲染？

Question

友

我的问题是，如果我使用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 - 一切都是一样的，但我们的第一部分是内联块，第二部分是内嵌。

.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填充：

display：inline-block; vs display：inline;

是否只是渲染故障（因为它只发生在firefox中）或者我对内联阻止的行为有误？

Answer 1

也许答案已在old post

中解释

我想澄清差异..

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

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

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

进行更改。在框中选择文本，您将看到第二个框正在选择开箱即用。 line-height的溢出受内联限制，但内联块会因overflow + padding而导致line-height增长

我认为这将清除大多数疑问，请参阅旧帖子了解更多详情。