当我使用以下CSS：
input[type=button] {
background-color: white;
border: 1px solid black;
font-size: 15px;
height: 20px;
padding: 7px;
}
与此HTML：
<input type="button" value="Foo" />
我期待看到这一点,所以总高度变成36px：
1px border 7px padding 20px content (with 15px text) 7px padding 1px border
但是,Firefox 3.6和Safari 4都显示：(没有在其他浏览器中测试)
Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png
1px border 7px padding 4px content (with 15px text) => height - 2 * border - 2 * padding 7px padding 1px border
有人有什么想法为什么会这样吗？
(即使是预期的行为,背后的逻辑是什么？)
解决方法
表单元素传统上具有包含其填充/边框的宽度/高度,因为它们最初由浏览器实现为OS本机UI小部件,其中CSS对装饰没有影响.
为了再现这种行为,Firefox和其他人将CSS3 box-sizing样式设置为边框来渲染一些表单域(select,button / input-type-button),以便width属性可以反映整个渲染区域的宽度,包括边框和填充.
您可以通过以下方式禁用此行为：
select,button {
Box-sizing: content-Box;
-moz-Box-sizing: content-Box;
-webkit-Box-sizing: content-Box;
}
(或者,对于要使用“100％”宽度的液体表单布局,更常见的是您可以将其他设置为边框).
在标准化过程到目前为止,-browser前缀版本必须在那里捕获实现此目的的浏览器.不过IE6-7将无效.
