Firefox和Safari中的不同填充

Question

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

Safari

Firefox

有问题的代码段只是一个<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 的尺寸似乎有些偏离：

Safari

Firefox

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

---

http://jsfiddle.net/19wsn4y7/26/上的最小示例

HTML：

$dbo->begin_transaction();

//Below are the 2 sample queries we need to run; each one will insert a row into a separate table
$result1 = $dbo->query($query1);
$result2 = $dbo->query($query2);

//If both queries were successful, commit
if ($result1 && $result2)
{
    $dbo->commit();
}
//Else, rollback and throw error
else
{
    $dbo->rollback();
    echo 'Writing to DB failed.';
}

CSS：

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

Answer 2

我建议您查找Normalize.css，以规范化（同步）​​自定义CSS，而不考虑浏览器类型。

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