輸入和選擇元素在Chrome + Safari中添加了填充，但不是Firefox？

Question

我注意到，標準輸入字段和選擇元素在Chrome + Safari中增加了它周圍的1或2像素填充，而在Firefox ..

這裏你可以看到一個基本的例子：http://pastehtml.com/view/aussjg3en.html

火狐4.0.1：不會增加填充的元素

鉻11.0.696.68：增加2px的填充到頂部和左輸入字段，但只2px的對選擇元素頂部

Safari 5.0.3：將2px填充添加到輸入字段的頂部和左側，但在select元素上僅添加了2px到頂部

但是爲什麼？我可以用一些簡單的CSS修復它，而不是爲這些瀏覽器做特定的樣式表嗎？我只想讓它看起來像沒有自動填充的Firefox ..

Answer 1

此問題已被解決（例如here，只是搜索「額外填充」），但Webkit渲染引擎添加填充（Chrome和Safari都使用它）。

你可以通過CSS解決這個問題。渲染引擎只有不同的「默認」值。你需要做的是明確地告訴元素有一個填充和0的餘量，或任何你想要的。

基本上，如果你不想給不同的渲染引擎帶來誤解的餘地和能力，你需要在你的樣式表中明確指出。

Answer 2

刪除<input type="search">以修復chrome中的填充問題。