webkit 与 firefox 的文本高度

Question

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

我是用眼睛来做这件事，只是设置一个边距顶部，以便它到达正确的位置。然而，在 Firefox 中，我需要 20 像素的上边距，在 Safari 中，我需要 15 像素（否则太低了）。我发现这种差异是因为 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/

Answer 2

您需要应用 CSS 重置。在所有项目上使用一个的良好实践。我知道的最著名的是： http://meyerweb.com/eric/tools/css/重置/