overflow：hidden + display：inline-block向上移动文本 [英] overflow:hidden + display:inline-block moves text upwards
本文介绍了overflow：hidden + display：inline-block向上移动文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下HTML：
<div>
a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>
我期望看到： abc 。
我在Chrome，Safari，Firefox中看到的内容：
What I see (in Chrome, Safari, Firefox):
b 高于 a 和 c 。
推荐答案
发生这种情况是因为 inline-block 元素的高度等于其父元素，并且 overflow：hidden 导致其底边在父元素的文本基线上对齐。因此，对于< span> （ JSFiddle ）。
This happens because the inline-block element has height equal to its parent and overflow: hidden causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the <span> (JSFiddle).
你可以通过给它修改它 vertical-align：bottom 。
You can fix this by also giving it vertical-align: bottom.
这篇关于overflow：hidden + display：inline-block向上移动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
