6

我有以下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 中的 line-height 为 30 行，但在 webkit 中为 32。

我知道浏览器会以不同的方式呈现事物，但我从来没有遇到过让文本正确居中的问题。

在以下示例中，您可以看到它在 Firefox 中降低了几个像素：http: //jsfiddle.net/mstefanko/EGzEB/5/

4

2 回答 2

10

其实我有相反的经历。我注意到一些标题元素在 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 跨度标题。

于 2012-06-15T21:28:11.670 回答
10

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

默认行高在不同的浏览器和不同字体大小的不同字体系列中相差很大。设置一个显式的 line-height 可以解决这个问题。

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

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

于 2012-06-15T21:52:49.010 回答