将背景图像与标题元素中的文本顶部对齐

Question

我在将图像与＆lt; h2＆gt;中的文本顶部对齐时遇到问题。元素因为文本顶部和元素顶部之间的空间在浏览器中是不同的（到目前为止，IE7，Safari 4和FF3之间的空间不同 - 没有测试任何其他内容）。特别引人注目，因为我使用的是大字体（48px）。有没有办法重置这个，所以他们都一样？它不是边距/填充。

这似乎是一个简单的修复，如果我只是从header元素中取出文本并将其放在div中，但它实际上是一个标题元素，我想仍然使用它，如果在一切皆有可能。

Answer 1

了解reset stylesheets，旨在减少不同浏览器之间的不一致性，从而长期保存大量工作。另见：

• Reset Reloaded
• YUI Reset CSS
• Blueprint CSS

Answer 2

重置样式表显然是第一步（例如，参见Eric Meyer的'重新加载重置'： http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/）。

这基本上覆盖浏览器渲染默认值为0，因此所有边距和填充均为0px，所有字体均为1em，行高为1em等。

如果您想省略重置样式表的使用，可以使用以下内容：

h1,h2 /* etc... */
{padding: 0;
margin: 0;
}

Answer 3

不，那是不可能的。

您可以指定边距，填充和线高，以使它们尽可能接近，但除此之外，您无能为力。在不同的浏览器和不同的系统上，文本将始终以不同的方式呈现。

文本的呈现方式取决于许多因素，除了浏览器的位置，例如系统上安装的字体，用户选择的字体大小和字体平滑设置。您永远不能指望文本在所有系统上的相同像素位置呈现。