在这个例子中 ......
<body>
<div>
<div>foo bar</div>
</div>
</body>
body, html, div {
height: 100%;
margin: 0;
}
div div {
display: inline-block;
overflow: hidden;
}
为什么会overflow: hidden导致垂直滚动条？此外,为什么这个高度不归因于页面上的任何内容？这就像一个无形的边缘.
所有元素的100%高度都是有意的.理论上,这应该导致最内部的div扩展以满足视口.它确实如此!...只要overflow: hidden不存在,为什么？
ube*_*001 20
额外的高度与高度差相同vertical-align: baseline,和vertical-align: bottom."下行线".这就是看似随机的"5个额外像素"的来源.如果字体大小是10倍,那么这个间隙也将是10倍.
而且,看来,当overflow: hidden是不存在的inline-block元素都有文本的文件的最后一行的同一基线基线.
这让我相信overflow: hidden 强迫整个inline-block元素的基线位于元素的底部.即使那里没有文本,inline-block元素的父元素也为下行线保留空间.在问题中给出的示例中,由于inline-block元素的父元素具有,因此不容易看到height: 100%.因此,相反,为下行线保留的额外空间溢出了该父div.
为什么这个空间仍然存在,即使没有文字？我认为这是因为它inline-block创建了一个内联格式化上下文,这是导致这个空间的原因.如果此元素为a block,则只有在遇到内联元素或文本时才会创建此内联格式设置上下文.
这只是一个理论,但似乎可以解释它.它还解释了为什么@Jonny Synthetic的答案有效:添加溢出:隐藏到父级隐藏了额外的下行线.
感谢@Hashem Qolami为我提供这个理论的jsbins.
添加overflow: hidden到父div不是我的选择,也因为我的HTML结构它不起作用.
但是,我注意到@Tony Gustafsson在OP中的评论,这确实解决了这个问题:
div div {
vertical-align: bottom;
}
| 归档时间： |
|
| 查看次数： |
9186 次 |
| 最近记录： |