<button> 填充/宽度问题答案

【问题标题】：<button> padding / width problem<button> 填充/宽度问题
【发布时间】：2011-10-11 01:20:19
【问题描述】：

我正在使用<button> 在表单中发出发布请求。我还将a.button 的样式设置为与<button> 完全相同（我需要a.button 来制作一些JS 内容）。

按钮有一些填充，一个固定的高度。当我指定按钮/ a 的宽度时，它们看起来都一样。但是当我向<button> 添加宽度时，它会忽略填充。

我在 Chrome、Firefox 和 Opera 中遇到了这个问题，所以我想这不是渲染错误。 <input type="submit" /> 也有同样的问题

这是基本的 CSS：

.button, button {
    margin: 0;
    display: inline-block;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background: #ddd;
    font: 12px Verdana;
    padding: 40px; /* 40px, so you can see that it won't be rendered with width */
    text-align: center;
}

HTML：

<a href="#" class="button">Some text</a>
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
<a href="#" class="button" style="width:200px">Some text</a>
<button style="width:200px">Some text</button>

小提琴：http://jsfiddle.net/9dtnz/

关于浏览器忽略填充的任何建议？（使用高度时为上下/使用宽度时为左右）。

【问题讨论】：

这对我来说在 FF 5.0 中看起来不错
Chrome 12 和 FF4 中没有
它工作正常您使用的是哪个版本的浏览器？
最后两个按钮是否有相同的outerWidth？它们不在 Chrome 12、FF 4 和 Opera 10.5 中

标签： css rendering width padding

【解决方案1】：

很奇怪，我看到我的 Chrome 对输入元素有一个 box-sizing: border-box; 规则，所以宽度中包含填充...

为了避免这种情况，只需指定box-sizing: content-box;（可能需要一些前缀）。

【讨论】：

非常感谢！这解决了问题。 -webkit-box-sizing: initial 完成了这项工作
我做了一些研究，但 initial 似乎不适用于 Opera 和 FF。这样做：[前缀]-box-sizing: content-box;
是的，我刚刚在 chrome 上进行了测试。我认为它对某些人有用=）
在 2018 年仍然适用于 Firefox 和 Chrome（现在都可以识别没有前缀的标准 box-sizing 属性）。我很想知道为什么两个浏览器都对表单元素使用不同的默认框大小。这是相当违反直觉的......

【解决方案2】：

对我来说看起来不错，所以可能是样式表冲突问题。尝试使用 !important 覆盖它可能会解决您的问题。

.button, button {
    margin: 0;
    display: inline-block;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background: #ddd;
    font: 12px Verdana;
    padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
    text-align: center;
}

希望这会有所帮助。

迈克尔。

【讨论】：

不，与 !important 没有区别。这是我看到的截图：cl.ly/261Z1T2C2Z0F44471f2y。最后两个按钮应该具有相同的外宽度，但它们没有。