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

【问题标题】：Firefox/Safari setting height as [specified height - padding - border] for input[type=button]Firefox/Safari 将输入高度设置为 [指定高度 - 填充 - 边框] [type=button]
【发布时间】：2011-01-16 16:18:32
【问题描述】：

当我使用以下 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

有人知道为什么会这样吗？

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

【问题讨论】：

图片链接损坏（使用 imgur！）

标签： html css height padding

【解决方案1】：

您可以尝试一些事情：

设置文档的doctype(<!DOCTYPE html>)
将输入设置为display:block 或display: inline-block
使用reset stylesheet。

【讨论】：

将 DOCTYPE 从 HTML4 Transitional 更改为 HTML5 对我有用。

【解决方案2】：

传统上，表单元素有一个 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 上无效。

【讨论】：

非常感谢！像魅力一样工作

【解决方案3】：

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

【讨论】：

其他元素按我说的工作：总高度是border-top + padding-top + height + padding-bottom + border-bottom。

【解决方案4】：

我得到它的工作删除输入按钮的填充并将高度设置为 20 左右。然后调整高度，锚元素的填充。我还设置了 line-height、font-size 和 font-family。

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

【讨论】：