Html 如何向 <input type="button"> 添加填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7960431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add padding to <input type="button">?
提问by Jakub Arnold
It's been couple of months since I've done some serious HTML/CSS coding, so I've probably missed a lot of things, but today I stumbled upon a really weird thing.
我已经有几个月没有认真地编写 HTML/CSS 代码了，所以我可能错过了很多东西，但今天我偶然发现了一件非常奇怪的事情。
When I try to apply paddingto a <input type="submit">, it doesn't work anymore.
I'm about 99% sure that I was able to do this, but now it seems as if it was impossible.
当我尝试申请paddinga 时<input type="submit">，它不再起作用。我大约 99% 确定我能够做到这一点，但现在似乎不可能。
I even looked at one of my older projects, where I know I had padding on submit buttons, but they don't work anymore.
我什至查看了我的一个旧项目，我知道我在提交按钮上有填充，但它们不再起作用了。
Here's a little demo of the problem
这是问题的一个小演示
<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>
and how it looks in Google Chrome 15 on Mac
以及它在 Mac 上的 Google Chrome 15 中的外观
but it doesn't seem to work in Firefox 4 at all
但它似乎在 Firefox 4 中根本不起作用
Here's a link to the demo source on JSbin.com
I would bet that this was working about 6 months ago, but something must have changed. I've been using Windows Vista and OS X Snow Leopard with recent upgrade to Lion, but that doesn't seem like it.
我敢打赌，这在大约 6 个月前有效，但一定发生了一些变化。我一直在使用 Windows Vista 和 OS X Snow Leopard，最近升级到 Lion，但似乎不是这样。
Am I missing something?
我错过了什么吗？
edit: fixing the typo DID NOT help. The padding still isn't applied to the first button.
编辑：修复错字没有帮助。填充仍然没有应用于第一个按钮。
edit2: After going through Adobe Browserlabit looks like this is OS X specific problem. I'd still like to know how to do this even on OS X though.
edit2：经过Adobe Browserlab 后，看起来这是 OS X 特定的问题。即使在 OS X 上，我仍然想知道如何做到这一点。
回答by Moob
This issue was apparent for me too on OS X Firefox. The solution is to disable the browser's default appearance before applying your own:
这个问题在 OS X Firefox 上对我来说也很明显。解决方案是在应用您自己的之前禁用浏览器的默认外观：
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
More info at: http://css-tricks.com/almanac/properties/a/appearance/
更多信息请访问：http: //css-tricks.com/almanac/properties/a/appearance/
回答by Brandon
<input type="submit" value="Submit" style="padding: 5x 10px;">
<input type="submit" value="Submit" style="padding: 5x 10px;">
You forgot the p in 5px. That is breaking the styling.
你忘记了 5px 中的 p。这打破了造型。
回答by GusDeCooL
You need to remove browser default style button first, to do that i usually restyle it with change the background and border. Here is the snippet style i use if want to change the button
您需要先删除浏览器默认样式按钮，为此我通常会通过更改背景和边框来重新设置它的样式。如果想更改按钮，这是我使用的代码段样式
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;
}
回答by MAChitgarha
You should use box-sizingproperty:
您应该使用box-sizing属性：
input[type="submit"] {
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
