css - 当使用inline-block和DOCTYPE html时，为什么scrollHeight比offsetHeight大？

Question

我们将 HTML 应用程序从 DOCTYPE XTHML 1.0 迁移到 DOCTYPE HTML。 我们看到在某些DIV中出现了垂直滚动。

这些 DIV 的布局类似于:
CSS

#scrollContainer,
#overflowedNode 
{
    height: 100px;
    width: 200px;
}

#overflowedNode 
{
    display: inline-block
}

HTML

<div id="scrollContainer">
    <div id="overflowedNode"></div>
</div>

在本例中，ID 为“scrollContainer”的 DIV 具有计算出的高度:

offsetHeight = 100;
scrollHeight = 105;

我认为会出现垂直滚动，因为高度差异为 5 个像素。 但是，如果您向 id 为“overflowedNode”的 DIV 中的内容添加至少一个字母，则scrollHeight 将等于offsetHeight。

为什么offsetHeight和scrollHeight到5px之间存在差异以及如何修复它？

重现示例: https://jsfiddle.net/yaznayka/204qntjh/5/

Answer 1

我想知道同样的事情...所以我做了一个小测试...我确保没有任何东西有边距...好吧，李做到了..所以我把它取下来，最后滚动高度，偏移高度和客户端高度是相同....然后我添加了 10 px 边距...并且减少了 10 px(这很令人困惑，因为我有 20 li 的...所以我假设除了偏移高度...但它不是...它就像只计算第一个...真的很奇怪。