输入和选择元素在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

这个问题之前已经被解决过（比如这里，只需搜索“extra padding”），但是Webkit渲染引擎添加了padding（Chrome和Safari都使用它）。

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

基本上，如果您不想给不同的渲染引擎留有余地和误解的能力，则需要在样式表中明确说明。