如何向 <input type="button"> 添加填充？答案

【问题标题】：How can I add padding to <input type="button">?如何向 <input type="button"> 添加填充？
【发布时间】：2011-12-19 02:43:26
【问题描述】：

我已经有几个月没有认真地编写 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，但看起来不像。

我错过了什么吗？

编辑：修正错字没有帮助。填充仍未应用于第一个按钮。

edit2：经过Adobe Browserlab 之后，看起来这是 OS X 特有的问题。我仍然想知道如何在 OS X 上执行此操作。

【问题讨论】：

您的代码中有错字。在<input type="submit" value="Submit" style="padding: 5x 10px;"> 中应该是5px，使其成为<input type="submit" value="Submit" style="padding: 5px 10px;">
请注意，使用 input[type="button"] 元素的唯一原因是使用 JavaScript。因为它们对样式来说太麻烦了，所以只需使用 a[href="#"] 元素代替。至于input[type="submit"]...祝你好运。
在提交按钮上使用填充时不要忘记有一个讨厌的 ie 错误：latrine.dgx.cz/the-stretched-buttons-problem-in-ie 修复此使用 overflow:visible
@Sasha 你是对的，但它仍然不能解决问题。
@Darth 在测试时对我来说工作得很好。您是否在其他环境中进行过测试？

标签： html css user-interface button

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

你忘记了 5px 中的 p。这破坏了样式。

【讨论】：

+1（不知道这是问题错字还是实际问题，但我必须把它交给你，真棒眼睛：P）
哇...起初我正要说“天哪，我真笨”...但后来我发现它仍然不起作用，即使在您修复了错字之后：\

【解决方案3】：

您需要先删除浏览器默认样式按钮，为此我通常会通过更改背景和边框来重新设置它的样式。如果要更改按钮，这是我使用的 sn-p 样式

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;
}

【讨论】：

【解决方案4】：

你应该使用box-sizing属性：

input[type="submit"] {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

【讨论】：