html - 在 Mac OS X 上添加填充以提交按钮

Question

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

http://jsfiddle.net/yxr197pa/1/

这是它的代码:

HTML:

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

CSS:

input {
    padding: 20px;
}

我一定是没有得到非常简单的东西，我有点尴尬我想不通。似乎没有其他人遇到这个问题，因为我已经进行了相当广泛的搜索。我什至见过人们毫无问题地添加填充的示例。非常感谢任何帮助。谢谢!

更新

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

http://i.imgur.com/9RxGJUo.png

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

但这还没有结束，因为在分析其他网站上的源代码后，我发现提交按钮在我的 Mac 上正确呈现填充，代码实际上相同。看这里:

http://htmlandcssbook.com/code-samples/chapter-14/styling-submit-buttons.html

那么为什么有时会渲染内边距而不是其他的呢？

Answer 1

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

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

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

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

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