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和其他人会渲染一些表单字段（select，button / input-type-button），并将CSS3 box-sizing样式设置为border-box，以便{{1} } property反映了整个渲染区域的宽度，包括边框和填充。

您可以使用以下方法禁用此行为：

width

（或者，对于要使用'100％'宽度的液体表单布局更常见，您可以将其他布局设置为select, button { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; }。）

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

Answer 2

您可以尝试一些事项：

Answer 3

这是有道理的，因为元素的高度自然比你设置的高。输入元素被赋予一个高度，在这种情况下，该高度应足以包含元素的文本，但您将其设置为较小的量。要显示此信息，请删除您的身高设置。

Answer 4

我得到它的工作去除输入按钮的填充并设置高度20左右。然后调整高度，锚元素的填充。我还设置了行高，字体大小和字体系列。

致力于FF，IE，safari和chrome：D