当使用inline-block和DOCTYPE html时,为什么scrollHeight大于offsetHeight?

时间:2015-09-11 07:49:24

标签: html css html5

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

2 个答案:

答案 0 :(得分:1)

我想知道同样的事情......所以我做了一点测试......我确保没有任何利润......好吧,李的确做到了......所以我把它拿下来,最后是卷轴, offsetHeight和clientHeight是相同的....然后我添加了10 px的余量...它是10 px off(这令人困惑,因为我喜欢20 li ...所以我&#39; d假设它除了偏移高度之外还有10 * n ......但它不是......它只计算第一个......非常奇怪。

答案 1 :(得分:0)

如果使用display: inline-block,则会显示空格字符。因此,如果您将其更改为block,则可以获得所需内容。

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