Firefox和Chrome之間的按鈕寬度差異

我知道有很多FF/Chrome CSS問題，但我似乎無法找到這個確切的問題。Firefox和Chrome之間的按鈕寬度差異

（道歉長CSS，這是從網站複製。）

從本質上講，Firefox和Chrome是給我兩個不同的值最裏面的按鈕寬度，4和6.我希望兩者都是4或更小。這是什麼造成的？

From Chrome

From Firefox

2012-02-21 Adam Grant

你不能讓一個更短，更簡潔的演示？當在SO上提出問題時，提供特殊演示（從頭開始）被認爲是禮貌的，而不是從網頁上覆制粘貼一大段代碼。 – 2012-02-21 16:49:04

除了'auto'和'max-width'之外，你沒有指定'width'，所以瀏覽器可以使它的元素儘可能的寬，以適應開發者的風格。如果這就是你想要的，爲什麼不把寬度限制在'4px'？ – Borealid 2012-02-21 16:49:37

如果我這樣做了，一旦用戶滾過按鈕，按鈕將只有4個像素寬（加上填充）嘗試jsfiddle，你會看到它在懸停時展開。 – 2012-02-21 16:50:51

你沒有比auto指定width等。

不同的渲染引擎會不同地考慮如何呈現網站。

如何將width更改爲4px和:hover以滿足您的需求？

2012-02-21 16:58:49

偉大的思想思考相似:)我只是做了這個改變，並且當我看到你的答案時即將發佈它在這裏工作。謝謝！ – 2012-02-21 17:04:25

嘗試添加下面的CSS。 Firefox在按鈕上添加一個額外的填充。

input::-moz-focus-inner, 
button::-moz-focus-inner { 
    padding: 0; 
    border: 0; 
}

2014-09-10 13:13:21

我知道這是舊的答案，但即使在您的示例中，FF 41和Chrome 47也沒有設置相同的按鈕高度。有2px差異...我必須添加'margin-top：-1px; margin-bottom：-1px;'解決這個問題。 – nelek 2016-01-16 16:49:42

回答