在
this example …
HTML
<body>
<div>
<div>foo bar</div>
</div>
</body>
CSS
body,html,div {
height: 100%;
margin: 0;
}
div div {
display: inline-block;
overflow: hidden;
}
为什么会溢出：隐藏导致垂直滚动条？此外,为什么这个高度不归因于页面上的任何内容？这就像一个看不见的保证金.
所有元素的100％的高度是有意的.在理论上,应该使最内部的div扩展到满足视口.而且它！ …只要溢出：隐藏不在那里,为什么？
解决方法
额外的高度与vertical-align：baseline和vertical-align：bottom之间的高度差相同. “下降线”.这就是看似随机的“5个额外的像素”来自哪里.如果字体大小是10倍,这个差距也将是10倍.
此外,似乎当overflow：hidden不存在时,inline-block元素的基线与其最后一行文本的基线相同.
这使我相信overflow：hidden将整个内联块元素的基线强制到元素的底部.即使在那里没有任何文本,内联块元素的父项保留下行线的空间.在问题给出的例子中,由于内嵌块元素的父元素的高度为100％,所以不容易看到.所以,相反,为下行线保留的额外空间从父级div溢出.
为什么这个空间仍然存在,即使没有文字？我认为这是因为内嵌块创建一个内联格式化上下文,这是什么导致这个空间.如果这个元素是一个块,它只会在遇到内联元素或文本时创建这个内联格式化上下文.
这只是一个理论,但似乎解释了这一点.这也解释了为什么@Jonny Synthetic的答案有效：添加溢出：隐藏给父母隐藏额外的下降线.
感谢@Hashem Qolami给了我这个理论的jsbins.
