html - 删除内联 block 元素中大文本上方和下方的空白

Question

假设我有一个定义为内联 block 的 span 元素。它的唯一内容是纯文本。当字体非常大时，您可以清楚地看到浏览器如何在文本上方和下方添加一点填充。

HTML:

CSS:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
}

​

<span>BIG TEXT</span>

看看盒子模型，很明显浏览器正在添加填充内容边缘。我需要删除这个“填充”，一种方法是简单地改变行高，如:

http://jsfiddle.net/7vNpJ/1/

这在 Chrome 中效果很好，但在 Firefox 中，文本向顶部移动(FF17、Chrome 23、Mac OSX)。

有跨浏览器解决方案的想法吗？谢谢!

Answer 1

看起来好像您需要显式设置字体，并根据需要更改 line-height 和 height。假设“Times New Roman”是您浏览器的默认字体:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

<span>
    BIG TEXT
</span>