Firefox 和 Safari 中的不同填充答案

【问题标题】：Different padding in Firefox and SafariFirefox 和 Safari 中的不同填充
【发布时间】：2018-09-07 12:47:35
【问题描述】：

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

Safari

火狐

有问题的 sn-p 只是一个 <li>-tag，其文本内容以彩色背景为中心：

<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/

【问题讨论】：

当谈到字体系列时，这是意料之中的......可能无衬线在两个浏览器中的处理方式不同
@TemaniAfif：谢谢。我将示例从“sans-serif”更改为“Helvetica, Arial”以排除该示例。

标签： html css webkit gecko

【解决方案1】：

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

Safari

火狐

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

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

【讨论】：

你得到了解释 web fonts ：与默认字体不同，它们是相同的跨浏览器，因为它们的行为由创建的字体定义，但默认字体由浏览器定义跨度>

【解决方案2】：

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

这将帮助您在呈现元素时实现跨浏览器的一致性。

【讨论】：

我认为这个问题与 CSS 规范化无关：CSS 来源的尺寸在浏览器之间是一致的，但字体渲染仍然不同。因此，粘贴 Normalize.css 并不能解决我的问题：jsfiddle.net/19wsn4y7/28