Firefox/Safari设置高度为[指定高度 - 填充 - 边框]输入[type = button]

Question

当我使用以下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都显示了这一点:(未在其他浏览器中测试过)

1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border

有谁知道为什么会这样？

(即使它是预期的行为,它背后的逻辑是什么？)

Answer 1

表单元素传统上有一个width/ height包括它们的填充/边框,因为它们最初是由浏览器实现的OS本机UI小部件,其中CSS对装饰没有影响.

要重现此行为,Firefox和其他人会渲染一些表单字段(选择,按钮/输入类型按钮),并将CSS3 框大小调整样式设置为border-box,以便该width属性反映整个渲染区域宽度,包括边框和填充.

您可以使用以下命令禁用此行为

select, button {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

(或者,对于要使用'100%'宽度的液体形式布局更常见,您可以将其他布局设置为border-box.)

在标准化过程到目前为止,-browser前缀版本必须用于捕获实现此功能的浏览器.但这对IE6-7无效.