firefox - firefox 与 webkit 相比行高低 2px

Question

我有以下 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 中降低了几个像素: http://jsfiddle.net/mstefanko/EGzEB/5/

Answer 1

我过去对此做过大量测试。我称之为 文本抖动。这不是你能控制的。您所能做的就是对每个文本元素应用一个明确的行高(尤其是像素)来最小化它。

默认行高在不同浏览器中有很大差异，对于不同字体大小的不同字体系列。设置明确的行高可以解决这个问题。

但在此范围内，无论您做什么，文本在行高空间内的确切位置都会因浏览器而略有不同。对于字体大小和行高的某些组合，所有浏览器都匹配。例如，font-size:11px 和 line-height:14px 的 Arial 在 FF、Webkit 和 IE 中呈现相同。但是将行高更改为 13px 或 15px，它会因浏览器之间的 1px 而异。

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