firefox - webkit vs firefox 文字高度

Question

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

我是通过肉眼来完成的，只是设置了一个 margin-top 以便它到达正确的位置。但是，在 Firefox 中，我需要 20px 的 margin-top，在 Safari 中我需要 15px(否则它太低了)。我看到差异是因为在 Safari 中，文本元素比在 Firefox 中高，并且在顶部包含少量空白，而在 Firefox 中没有显示(在 Firefox 中，文本元素的顶部恰好是文本开始的时间).

我已经尝试了所有带有行高的显示组合，也许还为文本添加了宽度/高度等等。什么都没用。

我该怎么做才能使它保持一致？我不想使用 JS，但它似乎是唯一的选择...

---

Answer 1

对于跨浏览器的 CSS 规范化，我建议重新设置 - YUI3 有一个很好的，Twitter Bootstrap 是另一个很好的。它基本上将 paddings 和 margins 设置为 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/