这是一个非常简单的案例:
<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 上都试过了,都有这个问题。
谁能给个解释?
最佳答案
内部容器是一个行内 block ,位于基线之上,该基线略高于外部容器的底部边缘(为 descenders 腾出空间)。由于外容器与内容器的高度完全相同,因此没有足够的空间容纳基线以下的区域,从而导致溢出。
将内部容器更改为 block 完全取消了基线,因为没有其他内联内容。
关于html - 为什么内联 block 容器会导致滚动条自动溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27613967/