输入和选择元素在 Chrome + Safari 中添加了填充，但在 Firefox 中没有？答案

【问题标题】：Input and select-elements has padding added in Chrome + Safari, but not Firefox?输入和选择元素在 Chrome + Safari 中添加了填充，但在 Firefox 中没有？
【发布时间】：2012-09-26 16:37:47
【问题描述】：

我注意到标准输入字段和选择元素在 Chrome + Safari 中会在其周围添加 1 或 2px 的填充，但在 Firefox 中则不会……

你可以在这里看到一个基本的例子：http://pastehtml.com/view/aussjg3en.html

Firefox 4.0.1：不向元素添加填充

Chrome 11.0.696.68：在输入字段的顶部和左侧添加 2px 的内边距，但在选择元素的顶部只有 2px 的内边距

Safari 5.0.3：在输入字段的顶部和左侧添加 2px 填充，但在选择元素的顶部仅添加 2px

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

【问题讨论】：

标签： google-chrome input safari cross-browser padding

【解决方案1】：

删除 <input type="search"> 以修复 chrome 中的填充问题。

【讨论】：

这很好，它也解决了 Safari 中的相同问题

【解决方案2】：

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

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

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

【讨论】：

感谢您的回答。我在尝试寻找解决方案时显然搜索了错误的东西:)
这并不能回答问题，即使您添加了重置样式表，输入和选择也有不同的填充。你可以添加 padding:0, box-sizing:border-box;外观：无，问题仍然存在，选择中添加了 2px padding-left。