如何在<input type =“button”/>中添加填充？

Question

自从我做了一些严肃的HTML / CSS编码以来已经有好几个月了，所以我可能错过了很多东西，但今天我偶然发现了一件非常奇怪的事情。

当我尝试将padding应用于<input type="submit">时，它不再有效。 我大约99％肯定能够做到这一点，但现在好像不可能。

我甚至看过我的一个旧项目，我知道我在提交按钮上有填充，但它们不再起作用了。

这是一个问题的小演示

<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

以及它在Mac上的Google Chrome 15中的外观

但它似乎并不适用于Firefox 4

Here's a link to the demo source on JSbin.com

我敢打赌，这种情况大约在6个月前发生，但必定会有所改变。我一直在使用Windows Vista和OS X Snow Leopard，最近升级到Lion，但看起来并不像。

我错过了什么吗？

编辑：修复拼写错误DID没帮助。填充仍然不会应用于第一个按钮。

edit2：经过Adobe Browserlab后，看起来这是OS X特有的问题。我甚至想知道如何在OS X上做到这一点。

Answer 1

在OS X Firefox上，这个问题对我来说也很明显。解决方案是在应用您自己的浏览器之前禁用浏览器的默认外观：

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

更多信息：http://css-tricks.com/almanac/properties/a/appearance/

Answer 2

<input type="submit" value="Submit" style="padding: 5x 10px;">

你忘记了5px中的p。这打破了造型。

Answer 3

首先需要删除浏览器默认样式按钮，为此我通常会更改背景和边框。这是我想要更改按钮时使用的片段样式

input[type="submit"], input[type="reset"] {
    background: none repeat scroll 0 0 #8C8C69;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    padding: 7px;
    text-transform: uppercase;
}

Answer 4

您应该使用box-sizing属性：

{{1}}