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和line-height的某些组合，所有浏览器都匹配。例如，font-size:11px和line-height:14px处的Arial在FF，Webkit和IE中呈现相同的效果。但是将行高改为13px或15px，它在浏览器到浏览器之间变化1px。

没有标准或定义的行为。它是该操作系统上的浏览器如何呈现特定字体系列，字体大小和行高的结果。例如，Arial是一种相对一致的字体，只要定义了明确的行高，通常不会变化超过1px，而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有跨度，它不会响应填充/边距，因此将它们包装在div中......这也适用于li span span标题。

firefox vs webkit中的行高2px

2 个答案: