2012-10-10 186 views
0

我想通過添加一個背景,使一個achor標記按鈕,雖然它看起來不錯,在鉻和safari,firefox 15.0.1似乎有一個錯誤。Firefox的奇怪填充使用錨標記

例如,http://jsfiddle.net/cqVjj/3/顯示文本甚至不是垂直居中。我甚至沒有指定填充,寬度或高度,但我期望與chrome類似的結果。 Firefox我在底部看到一個空間。

任何解決方案?

鉻21.0.1 chrome

火狐15.0.1 firefox

+0

在Chrome和Firefox中對我來說看起來也一樣。 – j08691

+0

在這兩個瀏覽器中看起來都一樣.. –

+0

檢查出添加的圖像。它不會出現在你的Firefox 15.0.1瀏覽器中。如果這有什麼不同,我也在osx上。 – Adam

回答

0

簡單的解決方法:

你缺少line-height屬性。它是相同的值font-size

line-height: 34px;

我更新您的jsfiddle:http://jsfiddle.net/cqVjj/4/

+0

好吧,它使瀏覽器一致,但它仍然有更多的空間在底部比頂部。我會張貼圖片來說明 – Adam

0

這不是通過瀏覽器一致。我建議你平衡間距與填充。例如參見這裏:

http://jsfiddle.net/exzRT/

奇怪的是改變字體像一個sans-serif字體「宋體」幫助。

+0

我使用的是helvetica,這似乎是問題 – Adam

+0

所以我想在這種情況下填充冷凝的作品。 –

0

渲染將取決於瀏覽器使用的確切字體以及他們決定用於這些字體的確切上升和下降度量。請注意,你甚至不告訴他們在你的小提琴中使用相同的字體系列。

但即使是過去認爲,什麼CSS2.1已就此事說的是(從http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced):

The height of the content area should be based on the font, but this 
specification does not specify how. A UA may, e.g., use the em-box or 
the maximum ascender and descender of the font. 

我懷疑你正在尋找的瀏覽器實際上只是用不同的定義內聯的內容區域。