如果有两个内联元素共享同一行，而较大的一行是vertical-align: baseline而较小的一行是vertical-align: middle，为什么中间对齐的元素出现在基线元素下面？
我已经整理了一个演示我正在谈论的内容的演示： http://jsfiddle.net/mLSG2/
看起来较小的元素的中线与较大的元素基线对齐，但这对我来说似乎没有多大意义。如果这是真的，背后的理性是什么？
更一般地说，有人可以解释当变化的线高和不同的垂直对齐声明的元素共享同一条线时如何计算对齐？规范中是否有定义此内容的地方？
答案 0 :(得分：1)
通过specification，vertical-align: middle应该“将框的垂直中点与父框的基线对齐，加上父框架的x高度的一半”。在这种情况下，斜体文本的线框的垂直中间应与div元素的基线对齐，加上该元素的x高度的一半。这使得它非常接近那条基线。
由于此处未设置字体，因此浏览器通常会使用默认字体大小，如16px。 x高度取决于字体，但我们假设粗略平均值：字体大小的一半，8px。其中一半是4px，差别相当小。 （div元素的字体大小不会因字体大小较大的内部元素而改变。）
浏览器错误可能会掩盖这种情况。 vertical-align属性有一个错误的历史记录。通常最好使用相对定位。