將背景圖像與標題元素中的文本頂部對齊

Question

我遇到問題，請將圖像對齊<h2>元素中的文本頂部，因爲文本頂部與頂部之間的空間元素框是跨瀏覽器的不同（到目前爲止，它一直IE7和Safari 4，和FF3之間的不同 - 沒有測試任何東西）。尤其值得注意的是，我使用了大字體（48px）。有什麼辦法可以重置這個，所以它們都是一樣的嗎？這不是保證金/填充。

這似乎是它會是一個簡單的辦法，如果我只是把文字從頭部元素，並把它放在一個div，但它實際上是一個頭元素，我想仍然使用它，如果儘可能。

Answer 1

不，這是不可能的。

您可以指定邊距，填充和線條高度以儘可能接近它們，但除此之外，您無法做任何事情。在不同的瀏覽器和不同的系統上，文本總是呈現不同的效果。

除了瀏覽器如何定位文檔外，文本的呈現方式還取決於很多因素，如系統中安裝的字體，用戶選擇的字體大小以及字體平滑設置。你也休想文本在所有系統上相同的像素位置上呈現。

Answer 2

看一看到reset stylesheets，其目的是爲了減少在不同瀏覽器從而節省了大量工作，在長期的矛盾。另請參閱：

• Reset Reloaded
• YUI Reset CSS
• Blueprint CSS

Answer 3

復位樣式將是顯而易見的第一步（參見，例如，Eric Meyer的 '重置重裝上陣'：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/）。

這基本上覆蓋瀏覽器渲染默認回到0，因此所有的邊距和填充爲0像素，所有的字體都爲1em，線高度在1em等

如果你想省略使用復位您可以使用以下內容：

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