溢出:隐藏+显示:内联块向上移动文本

我有以下的HTML:

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

我期望看到: abc

我所看到的(在Chrome,Safari,Firefox中): ABC

b高于ac 。 为什么是这样以及如何解决?

One Solution collect form web for “溢出:隐藏+显示:内联块向上移动文本”

发生这种情况的原因是, inline-block元素的高度等于其父项和overflow: hidden导致其下边缘与父项的文本基线alignment。 因此,对于<span> ( JSFiddle ),文本上的下行可用空间基本上翻倍了。

你也可以通过vertical-align: bottom来解决这个问题。

  • 什么是最常见的字体大小的H1 - H6标签
  • 如何把表放在页面的中心使用CSS?
  • 如何删除只从下划线:之前?
  • 当元素失去焦点时运行JavaScript
  • 如何删除iPhone / iOS上蓝色的电话号码样式?
  • HTML中的H1-H6字体大小
  • 如何在CSS中设置图片的最大宽度
  • 页面重新加载是否会导致发布?
  • 如何在HTMLdateinput标签中设置date格式?
  • 从多重select中发布值
  • 如何使一个<td>跨两列表中的两列?