火狐的頂部填充差（相比於其他瀏覽器）

我還沒有找到這個問題的澄清溶液，所以我決定創建這個話題。有一個很煩人的Firefox功能：火狐的頂部填充差（相比於其他瀏覽器）

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    div{ 
     line-height: 0; 
     margin: 0; 
     padding: 0; 
     border: 0; 
     width: 31px; 
     height: 50px; 
     font: 15px Verdana; 
     background: #0F0; 
    } 
</style> 

<body> 

<div>test</div> 

</body> 
</html>

下面是結果（200％）：

正如你看到的，在Firefox的頂部填充比頂部填充較大（6像素）其他瀏覽器（5px）。如何解決這個問題？

編輯：任何CSS復位不能解決問題。

來源

2012-03-10 Jack

我與FF和Chrome測試了這個地方，他們是相同的。 – j08691 2012-03-10 16:41:37

@ j08691我可以在非規範化文檔中看到問題，但您必須真正放大才能看到不同的（非常小的）文檔。用這種行爲開始小提琴。 [非規範化代碼]（http://jsfiddle.net/3BrPy/show/）vs [規範化代碼]（http://jsfiddle.net/3BrPy/1/show/）。 – 2012-03-10 16:50:57

不幸的是我仍然可以看到在這兩種情況下，這1px的區別:( – Jack 2012-03-10 16:57:44

嘗試銳復位。它可以解決像這些和其他不同瀏覽器默認行爲的問題。

http://developer.yahoo.com/yui/reset/

來源

2012-03-10 16:35:51 sethcall

試過，不解決它 – Jack 2012-03-10 16:40:39

這在通常情況下，當沒有默認值歸在你的CSS，這就是爲什麼這樣的工具，如normalize.css和reset樣式表都講得出正在做。這些工具嘗試規範化並重置由用戶代理（瀏覽器）設置的默認值。

來源

2012-03-10 16:37:48

試過，不解決它 – Jack 2012-03-10 16:40:29

@Jack看起來好像沒什麼問題這裏是你的代碼的演示，而無需使用。。任何規範化，[沒有規範化]（http://jsfiddle.net/3BrPy/show/）在這裏我們可以看到你的問題，現在這裏是相同的代碼使用'normalize.css'樣式表，[規範化演示]（http ：//jsfiddle.net/3BrPy/1/show/），一切看起來都是一樣的跨瀏覽器 – 2012-03-10 16:46:58

不幸的是我仍然可以看到在這兩種情況:( – Jack 2012-03-10 16:57:35

把這個你的CSS的頂部：

DIV { /*let Firefox stick to the padding web standards*/ 
     -moz-box-sizing:border-box; 
     box-sizing:border-box; 
     margin:0; 
     padding:0; 
    }

來源

2012-06-04 15:01:44 poepje

火狐的頂部填充差（相比於其他瀏覽器）

回答

相關問題