firefox vs 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 中降低了几个 px： http://jsfiddle.net/mstefanko/EGzEB/5/

Answer 1

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

默认的行高在不同的浏览器中会有很大的不同，并且对于不同字体大小的不同字体系列。设置明确的行高地址。

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

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

Answer 2

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

我发现这对我有用：

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

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