CSS填充添加到<input type ='submit'>的高度/宽度

Question

如果问过这个问题,我道歉,但我找不到完全相同的问题.正如W3schools所说,高度属性不包括填充,边框或边距! (链接).所以这是一个简单的样式声明:

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像素×18像素.显然,我可以通过填充两倍来增加按钮的高度和宽度,但我想知道为什么会出现差异.我在这里做了一个jsfiddle:http://jsfiddle.net/RRf5A/.谢谢你的帮助.仅供参考,我已经尝试过<button>而不是输入提交,并且display:inline-block.

Answer 1

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