当在Chrome和Firefox中包含文本时，我如何设置内联跨度以具有相同的高度？

Question

我有以下风格：

  background-color: #C9C5BC;
  color: #FFF;
  font-size: 10px;
  font-weight: bold;
  padding: 0 3px;
  text-transform: uppercase;
  cursor:pointer

HTML元素是

<span class="name-indicator">NameIndicator1</span>

看起来这是Firefox（需要）

在Chrome中它看起来像这样（错误）

问题是，在chrome中，span元素之间没有空白区域，这是因为在FF中高度为13px，在Chrome中为15px，当将chrome中的字体大小设置为7px时，我获得了正确的效果。

如何在两个浏览器上修复此问题？ 我想保持字体大小为10px

编辑：

我创造了一个小提琴，请看看FF和Chrome

Answer 1

为了更好地在许多浏览器中获得相同的结果，请在页面开头使用css-reset 。 这个小块的css将确保所有元素在所有浏览器中都具有相同的默认值。 你可以从这里得到一个。

Answer 2

我注意到stackoverflow答案中的codes看起来与您提供的图像类似（第二个）。 如果将CSS line-height: 21px放在容器.wmd-preview p ，则代码之间会出现分隔。 因此，通过向这些span的容器添加line-height可以解决您的问题。