【发布时间】：2014-01-01 05:37:09
【问题描述】：
我有以下 HTML：
<div>
a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>
我希望看到的内容：abc。
我所看到的（在 Chrome、Safari、Firefox 中）：
b 高于a 和c。为什么会这样以及如何解决？
【问题讨论】：
【发布时间】：2014-01-01 05:37:09
【问题描述】：
发生这种情况是因为inline-block 元素的高度等于其父元素，而overflow: hidden 导致其底部边缘与父元素的文本基线对齐。因此，对于<span> (JSFiddle)，文本上可用于下行的空间基本上翻了一番。
你也可以给它vertical-align: bottom来解决这个问题。
【讨论】：
-
但没有
overflow:hidden一切正常 -
@Daniil:
overflow:hidden改变了inline-block元素的基线，因为vertical-align的默认值是baseline，所以元素垂直移动。请参阅CSS spec（滚动到底部）。 -
它适用于
inline-block元素。谢谢，伙计。 -
感谢您的明确答复！对于一个奇怪的具体问题，我只需要这个确切的信息。现在修好了！
-
我遇到了这个问题，但仅限于 Firefox。添加
vertical-align: bottom将其固定在 FF 上，但使它看起来比在 Safari 和 Chrome 上应有的位置更远。解决此问题的方法是改用vertical-align: text-top。