firefox与webkit中的线高降低2倍

我有以下css：

.btn_container {
cursor: pointer;
font-family: Tahoma,Verdana,Arial;
font-size: 11px;
padding: 0;
width: auto;
}

.btn_center {
background: blue;
color: #FFFFFF !important;
display: block;
float: left;
font-weight: bold;
height: 32px;
line-height: 32px;
padding: 0 10px;
}

在firefox中，行高为30行，在webkit中为32行

我知道浏览器会以不同的方式呈现内容，但我从未遇到过让文本正确居中的问题

在下面的示例中，您可以看到它在firefox中降低了两个px：

---

事实上，我有相反的经历。我注意到一些标题元素在IE7/兼容模式以及Chrome/Safari中的位置较高。所以在经历了很多麻烦之后，我用chrome和saw-webkit检查了之前的边距：1.6em或添加到标题中的东西。添加该值并对其进行调整不起作用，因为它影响了页眉的高度，从而向下推送了一些元素，但填充选项对我来说效果很好

我发现这对我很有用：

H1, H2, H3, H4, H5, a.mainTab div {
  -webkit-padding-before: 1px;
}

---

a、 mainTab div的跨距不响应填充/边距，因此将它们包装在div中。。。这可能也适用于li-span标头。

我过去曾对此进行过大量测试。我称之为文本抖动。这不是你能控制的。您所能做的就是对每个文本元素应用一个显式的行高度（尤其是px中的行高度）

默认行高在不同浏览器中大幅度变化，并且对于不同字体大小的不同字体系列。设置显式行高可解决此问题

但在此范围内，无论您做什么，文本在行高度空间中的确切位置都会因浏览器的不同而略有不同。对于字体大小和行高的某些组合，所有浏览器都匹配。例如，Arial at

字体大小：11px

和

行高：14px

在FF、Webkit和IE中呈现相同的效果。但将行高更改为13px或15px，并且不同浏览器的行高会有所不同

---

它没有标准或定义的行为。这是浏览器在该操作系统上呈现特定字体系列、字体大小和线条高度的结果。例如，Arial是一种相对一致的字体，只要定义了明确的行高，其变化通常不会超过1px，而Helvetica的变化则多达4到6个像素。

您是否使用CSS重置样式表？

字体系列：Arial；字体大小：11px；行高：14px

在OSX上的Firefox中无法正确呈现。这非常有效，只做了需要的事情！