块和内联块列表显示不正确的垂直间距

Question

我有一个简单的 div 列表，但一个div是inline-block

<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
...

div {
    background-color: #000;
    color: #fff;
    line-height: 20px;
    font-size: 20px; 
}

div:nth-child(5) {
    display: inline-block;
    color: #bada55;
}

DEMO

一切看起来都很好（字体大小：20px）。但是，当我将字体大小更改为10px时，事情变得很奇怪

DEMO

尽管我可以通过添加

进行修复

body { font-size: 0 }

DEMO

我仍然不明白为什么行高和字体大小为20px时可以正常工作？有什么建议吗？

Answer 1

因为必须将嵌入式行放置在其容器的行高之内。

如果将容器的data.add(time()-agent.enterTime); 设置为line-height（在示例中为 10px ），则可以正常工作。