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

我有以下的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来解决这个问题。

  • 定位标记下载属性不起作用:Chrome 35.0.1916.114中的错误
  • 限制input到文本框:只允许数字和小数点
  • 试图alignment我的网页中心的HTMLbutton
  • 在其他HTML中使用<body>中的<style>标记
  • 禁用Android浏览器的input重叠?
  • 为什么JQuery只影响第一个div元素?
  • 如何改变一个<br>的高度?
  • Angular2禁用button
  • 用CSS3生成重复的六angular形图案
  • PHP POST不工作
  • 内联表单嵌套在引导程序中的水平表单3