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和line-height的某些组合,所有浏览器都匹配.例如,Arial at font-size:11px并line-height:14px在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 header.