CSS padding 添加到 <input type='submit'> 的高度/宽度答案

【问题标题】：CSS padding added to height/width for <input type='submit'>CSS padding 添加到 <input type='submit'> 的高度/宽度
【发布时间】：2011-05-21 03:09:14
【问题描述】：

如果有人问过这个问题，我很抱歉，但我找不到完全相同的问题。正如 W3schools 所说，height 属性不包括填充、边框或边距！(link)。所以这是一个简单的样式声明：

input {
  width:180px;
  height:18px;
  padding:7px;
  border:1px solid black;
}

这里是html：

<input type='text' name='text' value='194px by 32px' /><br  />
<input type='submit' name='button' id='button' value='180px by 18px' />

文本字段按预期为 194 像素 x 32 像素，但提交按钮为 180 像素 x 18 像素。显然，我可以将按钮的高度和宽度增加两倍的填充，但我想了解为什么会有差异。我在这里做了一个 jsfiddle：http://jsfiddle.net/RRf5A/。谢谢你的帮助。仅供参考，我已经尝试过<button> 而不是输入提交和display:inline-block。

【问题讨论】：

Firefox 和 Safari 通常不会在标准按钮上显示填充，因此如果您使用其中一种浏览器，则不会应用填充。我相信 Internet Explorer 确实应用了一些填充效果（但不确定它是否完美）
@jqueryrocks，jsfiddle 在 IE7、IE8、Safari 和 Firefox 中看起来是一样的，所以至少不是 IE 问题 ;-)
并非所有 w3schools 所说的都是正确的。为什么？在此处查看w3fools 以帮助您进一步了解高度/宽度。看到它here
我知道 w3schools 不具有权威性，但是如果您在 google 上搜索有关 html 或 css 的问题，它会不断出现，因此我将引用包括在内，以便读者知道我至少在此处提问之前搜索过。 :) & 感谢您提供有趣的链接。

标签： html css

【解决方案1】：

您可以通过将box-sizing: content-box; 添加到提交类型的输入元素来解决此问题。我不会自己详细介绍，而是将您发送到http://www.quirksmode.org/css/box.html。但是，它目前并未全面支持，因此您可能会发现为跨浏览器兼容性特别声明提交按钮的不同高度和填充效果更好。

【讨论】：