Webkit vs firefox文本高度

Question

我有一个相当大的文本(字体大小28)，我试图在一个固定高度的容器中垂直对齐。

我是通过眼睛来做的，只是设置一个margin-top，这样它就会到达正确的位置。然而，在Firefox中，我需要一个20px的margin-top，在Safari中，我需要一个15px的margin-top(否则就太靠下了)。我看到这种差异是因为Safari中的文本元素比Firefox中的文本元素高，并且在顶部包含少量的空白，这在Firefox中是不会显示的(在Firefox中，文本元素的顶部正是文本开始的时候)。

我已经尝试了所有类型的显示组合与行高度，也许添加一个宽度/高度的文本和什么的。没有作品。

我怎么做才能使它一致?我讨厌使用JS，但它似乎是唯一的选择…

---

Answer 1

对于跨浏览器的CSS规范化，我建议重置- YUI3有一个很好的，Twitter Bootstrap是另一个很好的。它基本上将填充和边距设置为0，所以所有浏览器都将遵循你的css规则，而不是他们自己的默认规则。

对于垂直对齐文本到容器，如果它是单行文本，使用line-height属性，并设置它等于容器的高度。

例如:

CSS:

div {
    height:300px;
    width: 400px;
    line-height: 300px;
    font-size:28px;
    background-color:#F0F0F0;
}

HTML:

<div>
   Some vertically centered text
</div>

示例:http://jsfiddle.net/Djvv7/

Answer 2

你需要应用css重置。在所有项目中使用一个是很好的实践。我知道的最有名的是:http://meyerweb.com/eric/tools/css/reset/