html - 绝对定位父级内的内联 block 元素的奇怪行为

Question

我很少<div>有 display:inline-block , 在 absolute 内定位父级 <div> .

HTML

<div id='wrap'>
  <div id='container'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'>&#64;</div>
    <div class='box'></div>
  </div>
</div>

CSS

*{
 margin:0;
}
html, body{
 height:100%;
}
#wrap{
 position:relative;
 background:lightgreen;
 height:100%;
}
#container{
 position:absolute;
 bottom:0px;
 vertical-align:baseline;
}
.box{
 display:inline-block;
 width:80px;
 height:120px;
 background:white;
 border:1px solid;
}

当我在任何 <div> 中添加一些 ascii 字符代码时s，奇怪的是其他<div>向上移动。如果我删除 ascii 字符，则所有 <div> s 在同一行中完美对齐。

检查这个JSFiddle

我知道制作此布局的其他方法，我可以使框成为绝对框并强制它们位于父级的底部，我知道 css3 flex .

但我对这个具体问题很感兴趣，有人可以解释为什么会这样吗？或者我该如何修复它？

更新

我对修复它不感兴趣，因为有很多方法可以实现相同的对齐。我只想了解发生了什么。问题是，默认情况下，div 在底部对齐。当其中一个 div 中有字符时，为什么其他 div 突然对齐到顶部？ Updated Fiddle with both scenarios

旁注:只有当我在元素内添加文本时才会发生这种情况，如果我添加 HTML 元素而不是字符，所有 div 仍会在底部对齐。

Answer 1

.box{
 display:inline-block;
 width:80px;
 height:120px;
 background:white;
 border:1px solid;
 vertical-align: top;
}

添加垂直对齐:顶部；当