Firefox / Safari设置高度为[指定高度 - 填充 - 边框]用于输入[type = button] [英] Firefox/Safari setting height as [specified height - padding - border] for input[type=button]

问题描述

当我使用以下CSS时：

When I use the following 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 ：

I expect to see this, so the total height becomes 36px:

1px  border
7px  padding
20px content (with 15px text)
7px  padding
1px  border

但是Firefox 3.6和Safari 4显示： （尚未在其他浏览器中测试）

But instead both Firefox 3.6 and Safari 4 show this: (Haven't tested in other browsers)

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

是否有人知道为什么会发生这种情况？

Does anyone have any idea why this happens?

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

(Even if it's expected behavior, what's the logic behind it?)

推荐答案

表单元素传统上具有 width / height 它们的填充/边框，因为它们最初由浏览器实现为OS本地UI小部件，其中CSS对装饰没有影响。

Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.

要重现此行为，Firefox和其他使用CSS3呈现一些表单字段（选择，按钮/输入类型按钮） box-sizing style set to border-box ，以便 width 属性反映整个

To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.

您可以通过以下方式禁用此行为：

You can disable this behaviour with:

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

（或者，这是更常见的液体形式布局， '100％'宽度，您可以将其他人设置为 border-box 。）

(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)

必须在那里抓住在标准化过程之前实现这一点的浏览器。这在IE6-7上是无效的。

The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.

这篇关于Firefox / Safari设置高度为[指定高度 - 填充 - 边框]用于输入[type = button]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！