您可以通过运行此
test case重现此结果.结果显示在下面的屏幕截图中.问题是,在Firefox上,当添加一个溢出：隐藏在“块”(截图中有灰色背景)时,阻止块按照我想要的方式对齐：而不是基于块与父框的基线对齐,就好像块的底部对齐在父框的基线上.如您在截图中看到的那样,Chrome不会发生这种情况.
这是Firefox的错误？
>如何在Firefox上获得预期的结果(基线与overflow：hidden对齐)？
注意：使用vertical-align：中间的“block”不会切割它,因为我真正想要的是基线对齐.您可以更清楚地看到vertical-align：中间没有通过设置填充来进行基线对齐：1em 0 .1em 0(更多的填充在顶部的框),它给你：
解决方法
它看起来像溢出：隐藏是错误的,它从内联块元素中删除基线.幸运的是,有一个看似冗余的Mozilla CSS扩展值用于溢出,可以防止溢出,但不会显示这种错误的行为.
尝试这个：
.block {
width: 10em; padding: .3em 0 .1em 0;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
white-space: nowrap;
display: inline-block;
border: 1px solid #666; background-color: #eee;
}
看起来它正确的解决了Firefox中的问题,并不会混乱Safari.
更新：
看起来Firefox和Opera正在渲染溢出：隐藏的内嵌块正确,Webkit浏览器不是.
根据W3C CSS2 Working Draft’s Visual Formatting Model Details,
The baseline of an ‘inline-block’ is the baseline of its last line Box in the normal flow,unless it has either no in-flow line Boxes or if its ‘overflow’ property has a computed value other than ‘visible’,in which case the baseline is the bottom margin edge.