firefox vs webkit中的line-height 2px lower [英] line-height 2px lower in firefox vs webkit

问题描述

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

line-height of 30 lines up center in firefox, but 32 in webkit.

我知道浏览器会呈现不同的东西，但我从来没有得到文本正确中心的问题。

I know browsers will render things differently, but i've never had a problem getting text to center properly.

在下面的例子中，你可以看到它在firefox中删除了一对px：
http://jsfiddle.net/mstefanko/EGzEB/5/

In the following example you can see that it drops a couple px lower in firefox: http://jsfiddle.net/mstefanko/EGzEB/5/

推荐答案

我在过去做了大量的测试。我称之为文本摇摆。这不是你可以控制的东西。你可以做的最小化它是一个明确的行高（特别是一个在px）到每个文本元素。

I've done heavy testing of this in the past. I call it text jiggle. It's not something you can control. All you can do to minimize it is apply an explicit line-height (especially one in px) to every text element.

默认行高度变化一个宽裕度在不同的浏览器，和不同的字体家庭不同的字体大小。设置一个显式的行高地址。

The default line-height varies by a wide margin in different browsers, and for different font families at different font sizes. Setting an explicit line-height addresses that.

但是在此范围内，文本在行高空间中的确切位置会随浏览器到浏览器的变化而变化你做什么。对于font-size和line-height的某些组合，所有浏览器都匹配。例如，Arial在 font-size：11px 和 line-height：14px 和IE。但是将行高更改为13px或15px，浏览器之间的差异为1px。

But within that, the exact placement of the text within the line-height space will vary slightly browser-to-browser no matter what you do. For some combinations of font-size and line-height, all browsers match up. For instance, Arial at font-size:11px and line-height:14px renders the same in FF, Webkit, and IE. But change the line-height to 13px or 15px, and it varies by 1px browser-to-browser.

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

There's no standard or defined behavior for it. It's the result of how that particular font-family, font-size, and line-height happens to be rendered by the browser on that operating system. Arial, for instance, is a relatively consistent font, generally not varying by more than 1px as long as an explicit line-height is defined, while Helvetica varies by as many as 4 to 6 pixels.

这篇关于firefox vs webkit中的line-height 2px lower的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！