Html 绝对定位父对象中内联块元素的奇怪行为

我有几个

具有

显示：内联块

，在

绝对

定位的父

中

HTML

当我在任何

中添加一些ascii字符代码时，奇怪的是其他

会向上移动。如果删除ascii字符，则所有

都会在同一行中完全对齐

检查这个

我知道制作此布局的其他方法，我可以将框设置为绝对，并强制将它们放置在父级的底部，我知道css3

flex

但我对这个具体问题感兴趣，有人能解释一下为什么会发生这种情况吗。。？或者我怎样才能修复它

更新

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

旁注：这只发生在我在元素中添加文本时，如果我添加一个HTML元素而不是一个字符，那么所有div仍然在底部对齐

添加垂直对齐：顶部；

---

当

所有这些奇怪的事情都是所谓的垂直对齐，它只应用于内联元素（包括内联块），空的

div

没有任何内容让我们知道基线应该在哪里，但看起来它似乎是通过某种设计定位在

div

块的最底部，此基线位置将穿过当前内联流中所有其他元素的基线，因此您可以看到结果。要解决此问题，只需为所有

分区显式设置
垂直对齐
，或使用
：empty
选择器仅筛选空分区为什么空分区没有基线，即使显式设置了
高度
。。。？真正的问题是，当其中一个div获得基线时，为什么其他div突然在顶部对齐？高度与基线无关，事实上，
行高度是影响基线的因素，但它仅在容器包含某些内容时才起作用。当它为空时，看起来默认基线是底边/边框。为什么会这样？我相信这只是一个设计的功能。你只需要知道它的行为，并相应地调整你的css以使它工作……如果你是一个设计师，你会把空的
div
的基线放在哪里？您可以选择顶部边缘/边框（而不是底部边缘/边框），也可以选择由
线条高度
确定的基线，这是从顶部边缘计算的距离。因此，我认为这个问题更适合某些设计师，而不是某些程序员/开发人员。虽然我认为这样设计可能没有什么重要的理由。
<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>

*{
 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;
}

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