为什么在使用 inline-block 和 DOCTYPE html 时，scrollHeight 大于 offsetHeight？答案

【问题标题】：Why scrollHeight is bigger than offsetHeight, when used inline-block and DOCTYPE html?为什么在使用 inline-block 和 DOCTYPE html 时，scrollHeight 大于 offsetHeight？
【发布时间】：2015-09-17 05:39:50
【问题描述】：

我们将 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/

【问题讨论】：

您可以阅读：stackoverflow.com/a/19719861/2686143
不知道它是否有帮助，但滚动条只在 XHTML 1.0 过渡中消失了。在 Strict 中，您还拥有滚动条。
@guvenckardas，我知道 offsetHeight 和 scrollHeight 之间的区别。但在这种情况下，没有使用填充、边框或其他东西。

标签： css html

【解决方案1】：

我想知道同样的事情...所以我做了一个小测试...我确保没有任何边距...好吧 li 确实做到了..所以我把它取下来，最后 scrollHeight、offsetHeight 和 clientHeight 是同样....然后我添加了 10 px 的边距...它减少了 10 px （这令人困惑，因为我喜欢 20 li...所以我假设它会是 10*n偏移高度……但它不是……它好像只计算了第一个……真的很奇怪。

【讨论】：

【解决方案2】：

如果您使用display: inline-block，则会出现一个空格字符。所以，如果你把它改成block，你就会得到你想要的。

#scrolled
{
    display: block; /* it's OK with block */
    height: 100px;
    width: 200px;
    background-color: black;
    color: white;
}

【讨论】：

感谢您的回答。我知道 display: block 可以解决这个问题。但我想了解为什么会发生。也许在某些情况下您需要使用带有 display=inline-block 的样式。
这个例子显示它是inline-block元素jsfiddle.net/infous/204qntjh/7后面的一个空格但是我不知道为什么设置文本时它会消失...
唯一合乎逻辑的结论似乎是您正在以某种方式防止换行。