输入和选择元素在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中的填充问题。