两个div同一行:为什么溢出:隐藏; 导致垂直偏移？

Question

我有两个div在display: inline-block; https://jsfiddle.net/3q0kbv2k/的同一行旁边.当我放上overflow: hidden;第一个div时,第二个div向下移动一个小偏移量.

HTML:

<!-- CODE ON ONE LINE ON PURPOSE -->
<!-- WHITESPACES BREAK LAYOUT -->
<div class="foo">foooooooooooooooooooooo</div><div class="bar"><div>bar</div></div>

CSS:

.foo {
    display: inline-block;
    width: 9%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
}

为什么会这样？

我发现这个老问题描述了同样的情况,并包含一个解决方法,但我有兴趣理解为什么会发生这种情况,这是一个错误还是正常的行为？

Answer 1

从规格:

"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.

你的foodiv有一个"除了可见之外"的溢出,所以它的基线是"底部边缘边缘".

您的bardiv有可见溢出,因此其基线是其文本的基线.

您可以通过给它们相同的vertical-align样式来解决这个问题:

.foo {
    display: inline-block;
    width: 5%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
    vertical-align: middle;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
    vertical-align: middle;
}

<div class="foo">foooooooooooooooooooooo</div>
<div class="bar"><div>bar</div></div>