Firefox和Safari中的填充不同

Question

我在Webkit和Gecko之间面临奇怪的不一致渲染。

苹果浏览器

火狐

有问题的片段只是一个<li>标签，其文本内容集中在彩色背景上：

<ul class="tags">
    <li>some tag</li>
</ul>

格式化：

ul.tags li {
    font-family: Helvetica, Arial;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #806d66;
    color: white;
    border-radius: 0.3em;
    padding: 5px 6px 3px;
}

在我的绝望中，我已经将所有相关单位从em更改为px并删除了与行高相关的内容。我错过了什么？谢谢你的建议！

的jsfiddle：http://jsfiddle.net/19wsn4y7/13/

Answer 1

问题似乎是字体特定的。虽然我在本地安装的Arial版本在浏览器引擎中一致呈现，但Helvetica的尺寸似乎有点偏差：

苹果浏览器

火狐

我仍然不明白发生了什么，但我可以通过使用网络字体来避免这些问题。 但是，我仍然感谢任何进一步的见解！

---

在http://jsfiddle.net/19wsn4y7/26/的最小例子

HTML：

<ul>
    <li>HELVETICA</li>
    <li>ARIAL</li>
</ul>

CSS：

li {
    font-family:Arial;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: black;
    color: white;
}

li:first-child {
  font-family: Helvetica;
}

Answer 2

我建议你查找Normalize.css，无论浏览器类型如何，都能规范化（同步）​​自定义css。

这将有助于您在渲染元素时实现跨浏览器的一致性。