Question

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

<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

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

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

Answer 2

inline-block元素上有边距，导致滚动条出现。如果您在其上设置-4px页边距，则无法看到滚动条。

.innerContainer-inlineBlock{
    display: inline-block;
    margin: -2px;/*left and right -2-2=-4px*/
}

demo

如果您考虑使用float而不是inline-block，那么您将无法看到滚动条，因为它们上没有边距空间。 demo

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

2 个答案: