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

【问题标题】：Aligning a background image to the top of text in a header element将背景图像与标题元素中的文本顶部对齐
【发布时间】：2009-09-14 07:54:26
【问题描述】：

我在将图像与

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

如果我只是从标题元素中取出文本并将其放入 div 中，这似乎很容易解决，但它实际上是一个标题元素，如果在一切皆有可能。

【问题讨论】：

【解决方案1】：

不，这是不可能的。

您可以指定边距、内边距和行高以使它们尽可能接近，但除此之外，您无能为力。文本在不同的浏览器和不同的系统上总是以不同的方式呈现。

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

【讨论】：

【解决方案2】：

查看reset stylesheets，它旨在减少不同浏览器之间的不一致，从而长期节省大量工作。另见：

【讨论】：

【解决方案3】：

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

这实质上将浏览器渲染默认值覆盖为 0，因此所有边距和内边距为 0px，所有字体为 1em，行高为 1em 等。

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

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

【讨论】：