更新

Question

我在向提交按钮添加填充时遇到问题。我在JSFiddle中创建了一个超简单的例子：

以下是代码：

HTML：

<input type="submit" value="Submit" />

CSS：

input {
    padding: 20px;
}

我一定不能让事情变得非常简单，而且我有点尴尬，我无法弄明白。似乎没有其他人有这个问题，因为我已经进行了相当广泛的搜索。我甚至看到人们添加填充没有问题的例子。非常感谢任何帮助。谢谢！

为那些可能会被我提出的问题困惑的人澄清问题：上面的代码不会以任何方式改变按钮的填充。它似乎应用于按钮的默认填充，但我指定的填充根本不显示。这是一张描述我在输入上述代码时看到的内容的图片：

这个问题已在下面的答案中修复，但根本原因对我来说仍然是一个谜。它似乎与我的电脑有关。我使用完全最新的Mac OS X.另一方面，我的PC完全正常地呈现上面的例子。在我的Mac上使用哪种浏览器并不重要，它仍然无法呈现我指定的填充。

这不是故事的结尾，因为在分析了其他网站上的源代码之后，我发现提交按钮正在我的Mac上正确渲染填充，并且代码实际上是相同的。见这里：

那么为什么有时会渲染填充而不是其他渲染？

Answer 1

根据上面的评论，你说你在Mac（OS X）上..

因此，您需要将appearance元素的input属性设置为none才能使填充有效。我继续添加-webkit / -moz供应商前缀属性：

input {
  padding: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<input type="submit" value="Submit" />

这似乎是那些奇怪的跨浏览器不一致之一，因为这似乎不是Windows上的问题。

Answer 2

在我看来，你不能在输入中添加填充。

我认为最接近的是增加输入的高度和宽度。