Question

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

它在chrome和safari中显示确定，但在Firefox中，文本和底部边框之间的空间比文本和顶部边框之间的空间更大。检查firefox中的元素我发现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>

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

Firefox：http://puu.sh/lHWUv/aa066712c3.png

正如你在最后一个截图中看到的那样，firefox正在使得跨度比它的内容更高。 http://puu.sh/lHX1V/c6f6a12c13.png

我该如何解决这个问题？

Answer 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;
}

Firefox问题跨度与填充和边框

1 个答案: