webkit vs firefox 文字高度答案

【问题标题】：webkit vs firefox height of textwebkit vs firefox 文字高度
【发布时间】：2011-12-15 10:22:24
【问题描述】：

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

我是通过眼睛来做这件事的，只是设置了一个margin-top，以便它到达正确的位置。但是，在 Firefox 中，我需要 20 像素的边距顶部，在 Safari 中我需要 15 像素（否则它太低了）。我看到差异是因为在 Safari 中的文本元素比在 Firefox 中的要高，并且顶部包含少量的空白，而在 Firefox 中没有出现（在 Firefox 中，文本元素的顶部正好是文本开始的时间） )。

我已经尝试了各种带有行高的显示组合，也许还为文本添加了宽度/高度等等。没有任何效果。

我能做些什么来保持这种一致性？我讨厌使用 JS，但它似乎是唯一的选择......

【问题讨论】：

请看相关的html/css！ jsfiddle.net

标签： firefox webkit vertical-alignment css

【解决方案1】：

您需要应用 css 重置。在所有项目中使用一个的好习惯。我知道的最著名的是：http://meyerweb.com/eric/tools/css/reset/

【讨论】：

【解决方案2】：

对于跨浏览器的 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/

【讨论】：