【问题标题】：Chrome padding bug铬填充错误
【发布时间】：2012-03-18 20:13:06
【问题描述】：

上下文

我有这个：

<input type="text" placeholder="Un employé, un standard ou un numéro..." />

带有 CSS 属性：padding: 4px。

效果图：

对于信息，我将 Bootstrap 用于 CSS。

调查

在屏幕上，Chrome 只执行padding-left: 4px 而不是padding: 4px。

我试过padding: 4px 4px 4px 4px 和padding-top: 4px; padding-right: 4px; etc。

同样的问题。

奇怪的事情，我单独尝试了padding-top: 4px 并且它有效。与任何padding-xxx 相同。

最后，我在页面上的input 上尝试了padding: 4px，它成功了。

有什么问题？

【问题讨论】：

【解决方案1】：

您是否通过 CSS 为您的 input 设置了任何 height 值？如果有，请尝试删除它，看看是否有帮助。

（为接受答案而复制评论。）

【讨论】：

【解决方案2】：

Chrome 将默认样式应用于大多数表单元素。我们通过在<input> 的样式中添加-webkit-appearance: none; 来解决这个问题。

【讨论】：

【解决方案3】：

您是否在元素上设置了填充或高度，请尝试增加/减少，或者如果它不起作用，则将其删除并再次测试它可能会有所帮助。请尝试在所有浏览器中同时测试它，以便在所有浏览器中使其相似。

【讨论】：

【解决方案4】：

我在使用 Bootstrap 时又遇到了这个问题，这是因为我使用的是 <!DOCYTPE> 而不是 <!DOCTYPE html>。

【讨论】：