【问题标题】：Adding padding to submit buttons on Mac OS X在 Mac OS X 上添加填充以提交按钮
【发布时间】：2015-05-02 07:23:35
【问题描述】：

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

这是它的代码：

HTML：

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

CSS：

input {
    padding: 20px;
}

我肯定没有得到真正简单的东西，而且我有点尴尬，我无法弄清楚。似乎没有其他人遇到这个问题，因为我已经进行了广泛的搜索。我什至见过人们毫无问题地添加填充的例子。非常感谢任何帮助。谢谢！

更新

为那些可能对我所问的内容感到困惑的人澄清问题：上面的代码不会以任何方式改变按钮的填充。似乎对按钮应用了默认填充，但我指定的填充根本没有显示。这是我输入上述代码时看到的图片：

这个问题已在下面的答案中得到解决，但根本原因对我来说仍然是个谜。它似乎与我的电脑有关。我使用的是完全最新的 Mac OS X。另一方面，我的 PC 完全正常地呈现上面的示例。我在 Mac 上使用什么浏览器也没有关系，它仍然不会呈现我指定的填充。

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

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

【问题讨论】：

【解决方案1】：

根据上面的 cmets，您说您使用的是 Mac (OS X)..

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

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

&lt;input type="submit" value="Submit" /&gt;

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

【讨论】：

@Sachin 你确定吗？基于Tom's comment，它起作用了。我要启动我的 Mac，看看是否有一些浏览器的软选项可以控制它。
@JoshCrozier 这对我有用，乔希。哇，多么奇怪的问题。你会推荐使用button 而不是<input type="submit" /> 吗？这似乎是一个基本元素，我认为所有浏览器现在都会想出如何统一实现它。

【解决方案2】：

在我看来，您无法为输入添加填充。

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

【讨论】：