html - 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

有谁知道为什么会这样？

（即使这是预期的行为，其背后的逻辑是什么？）

score 27 · Accepted Answer

表单元素传统上都有一个width/ height，其中包括它们的填充/边框，因为它们最初是由浏览器作为操作系统原生 UI 小部件实现的，其中 CSS 对装饰没有影响。

为了重现这种行为，Firefox 和其他人渲染了一些表单字段（选择、按钮/输入类型按钮），并将 CSS3 box-sizing样式设置为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 上无效。

score 1 · Accepted Answer

您可以尝试几件事：

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

在 FF、IE、safari 和 chrome 上工作：D

4 回答 4