输入和选择元素在Chrome + Safari中添加了填充，但不是Firefox？

Question

我注意到标准输入字段和select-elements在Chrome + Safari中添加了1或2px填充，但不是Firefox ..

您可以在此处查看基本示例：http://pastehtml.com/view/aussjg3en.html

Firefox 4.0.1：不向元素添加填充

Chrome 11.0.696.68：在输入字段的顶部和左侧添加了2px填充，但在select-elements上只增加了2px

Safari 5.0.3：在输入字段的顶部和左侧添加2px填充，但在select-elements上仅添加2px到顶部

但为什么呢？我可以用一些简单的CSS修复它，而不是为浏览器做特定的样式表吗？我只是希望它看起来像没有自动填充的Firefox ..

Answer 1

之前已经解决了这个问题（例如here，只搜索“额外填充”），但Webkit渲染引擎添加了填充（Chrome和Safari都使用它）。

您可以通过CSS解决此问题。渲染引擎只有不同的“默认”值。你需要做的是明确告诉元素填充和边距为0，或者你想要的是什么。

基本上，如果您不想为不同的渲染引擎提供余地和曲解能力，您需要在样式表中明确说明。

Answer 2

删除<input type="search">以解决Chrome中的填充问题。