在 Mac OS X 上添加填充以提交按钮
Adding padding to submit buttons on Mac OS X
我在向提交按钮添加填充时遇到问题。我在 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
那么为什么有时会渲染内边距而不是其他的呢？
在我看来，您无法向输入添加填充。
我认为最接近的是增加输入的高度和宽度。
根据以上评论，您说您在 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 上似乎不是问题。
我在向提交按钮添加填充时遇到问题。我在 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
那么为什么有时会渲染内边距而不是其他的呢？
在我看来，您无法向输入添加填充。
我认为最接近的是增加输入的高度和宽度。
根据以上评论，您说您在 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 上似乎不是问题。