overflow:hidden + display:inline-block会使文本向上移动。

Question

我有以下的HTML：

<div>
    a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>

我期望看到的是：abc。

但是我在Chrome、Safari和Firefox中看到的是：

b比a和c高。为什么会这样，如何解决？

- Daniil

Answer 1

这是因为 inline-block 元素的高度等于其父元素的高度，并且 overflow: hidden 使其底边与父元素的文本基线对齐。因此，对于 <span> （JSFiddle）而言，可用于文本下沉符的空间实际上增加了一倍。

你可以通过给它添加 vertical-align: bottom 来解决此问题。

- Jon

---

但是如果没有overflow:hidden，一切都正常。 - Daniil

overflow:hidden会改变inline-block元素的基线，由于vertical-align的默认值是baseline，因此元素会在垂直方向上移动。请参见CSS规范（滚动到底部）。 - Jon

它在 inline-block 元素上起作用了。谢谢，老兄。 - steveluoxin

谢谢您提供这么清晰的答案！我需要这个非常具体问题的确切信息。现在问题已经解决了！ - travelsize

我遇到了这个问题，但只在Firefox上出现。添加 vertical-align: bottom 可以在FF上解决它，但会使它在Safari和Chrome上看起来比应该低得多。解决方法是改用 vertical-align: text-top。 - Nate Levin