html – Firefox / Safari设置高度为[指定高度 – 填充 – 边框]

发布时间：2020-12-14 19:31:07 所属栏目：资源来源：网络整理

导读：当我使用以下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 border7px padding

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

有人有什么想法为什么会这样吗？

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

解决方法

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

为了再现这种行为,Firefox和其他人将CSS3 box-sizing样式设置为边框来渲染一些表单域(select,button / input-type-button),以便width属性可以反映整个渲染区域的宽度,包括边框和填充.

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

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

(或者,对于要使用“100％”宽度的液体表单布局,更常见的是您可以将其他设置为边框).

在标准化过程到目前为止,-browser前缀版本必须在那里捕获实现此目的的浏览器.不过IE6-7将无效.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!