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

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;
}

外容器具有自动溢出功能，而内容器具有内联块显示功能。然后，即使内容大小与容器相同甚至比容器小一点，滚动条仍然会显示。

如果我对内部容器使用块显示，它的行为将按预期进行。

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

任何人都可以给出一点解释吗？

Answer 1

内部容器是一个内联块，位于稍微高于外部容器底部边缘的基线上（为下降器腾出空间）。由于外容器与内容器的高度完全相同，因此没有足够的空间容纳基线以下的区域，从而导致溢出。

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