html - 为什么内联 block 容器会导致滚动条自动溢出？

Question

这是一个非常简单的案例:

http://jsfiddle.net/8j6rt02h/

<div class="outerContainer">
    <div class="innerContainer-inlineBlock">
        <div class="content">            
        </div>
    </div>
</div>

CSS:

.outerContainer{
   width: 100px;
    height:100px;
    overflow: auto;
}
.innerContainer-inlineBlock{
    display: inline-block;
}
.content{
    background-color: blue;
    width: 100px;
    height:100px;
}

外层容器自动溢出，而内层容器行内 block 显示。然后，即使内容大小与容器相同，甚至比容器小一点，滚动条仍然显示。

如果我对内部容器使用 block 显示，它会按预期运行。

我在 Chrome 和 IE 上都试过了，都有这个问题。

谁能给个解释？

Answer 1

内部容器是一个行内 block ，位于基线之上，该基线略高于外部容器的底部边缘(为 descenders 腾出空间)。由于外容器与内容器的高度完全相同，因此没有足够的空间容纳基线以下的区域，从而导致溢出。

将内部容器更改为 block 完全取消了基线，因为没有其他内联内容。