爲什麼Safari瀏覽器中的按鈕與FireFox，IE8和Chrome相比看起來更大？

Question

我有一個網站，其標題看起來在Safari中查看時與FireFox或IE8相比看起來不對齊。我發現這是由Safari中比其他瀏覽器看起來更大的按鈕造成的。什麼CSS可以解決這個問題在Safari？

下面是截圖比較Safari和Firefox：

http://webypedia.com/wp-content/uploads/2010/08/Safari-buttons-are-larger-than-Firefox-e1282788166774.gif

這裏是主頁，其中的不對齊情況：

http://webypedia.com

Answer 1

要平滑供應商特定的默認CSS，通常使用「CSS重置」。 我個人喜歡the one in YUI。來自網站：

基本的CSS Reset消除了瀏覽器提供的HTML元素的不一致風格。這創造了一個可靠的基礎。加載CSS重置後，寫出您的項目需要的顯式CSS。

假設你的重置樣式表是「好的」，那麼絕大多數跨瀏覽器的差異，如你的按鈕大小問題，將被消除。

Answer 2

你應該設置的行高按鈕也爲11px。

按鈕高度是使用line-height + padding +任何邊框來計算的。Safari似乎有一個與其他瀏覽器不同的默認行高。