Firefox 问题跨度与填充和边框答案

【问题标题】：Firefox issue span with padding and borderFirefox 问题跨度与填充和边框
【发布时间】：2016-03-08 08:28:02
【问题描述】：

所以，我有一个包含一些文本的跨度，它有填充并且有一个边框。

它在 chrome 和 safari 中显示正常，但在 Firefox 中，文本和底部边框之间的空间比文本和顶部边框之间的空间大。检查火狐中的元素我发现火狐中的跨度比其中的文本高，并且文本是顶部对齐的。下面是一个截图来解释我自己。

但首先，这是代码：

span.num{
  border:1px solid #00B288;
  border-radius: 5px;
  padding:5px 15px;
  font-size:25px;
  color:#fff;
  font-weight:100;
  letter-spacing: 0.5px;
}

<span class="num">0800-777-8101</span>

铬：http://puu.sh/lHWSM/aa4e15a522.png

火狐：http://puu.sh/lHWUv/aa066712c3.png

正如您在最后一个屏幕截图中看到的那样，Firefox 使跨度的高度大于其内容。 http://puu.sh/lHX1V/c6f6a12c13.png

我该如何解决这个问题？

【问题讨论】：

@HunterTurner 它不起作用，我尝试设置 line-height ，正如我在第一次研究中看到的那样，但修改 line-height 只会向上或向下移动整个跨度（类似于添加 margin-top )，但在边框内无效
这是一个用于测试的小提琴jsfiddle.net/Hunter377/1vc69x2x/1
@HunterTurner 您可以看到，在 Firefox 中打开您的 JSFiddle 会重现我正在谈论的相同问题。
是的，我可以看到它，我只是为了测试目的而制作它。我现在搞砸了。
@HunterTurner 非常感谢您抽出宝贵时间，如果我找到解决方法或导致此问题的原因，我会告诉您。

标签： html css firefox

【解决方案1】：

这是因为 Chrome 和 Firefox 以不同的方式呈现字体，并且还具有不同的默认 line-height。设置固定的line-height和设置display:inline-block可以强制它们以相同的规则渲染元素。

例子：

span.num{
  border:1px solid #00B288;
  border-radius: 5px;
  padding:5px 15px;
  font-size:25px;
  color:#fff;
  font-weight:100;
  letter-spacing: 0.5px;

  line-height:1.2em;
  display:inline-block;
}

【讨论】：