html – FirefoxSafari设置高度为[指定高度 – 填充 – 边框]输入[type = button]

概述当我使用以下CSS： input[type=button] { background-color: white; border: 1px solid black; font-size: 15px; height: 20px; padding: 7px;} 与此HTML： <input type="button" value="Foo" /> 我期待看到这一点,所以总高度变成3 当我使用以下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  padding20px content (with 15px text)7px  padding1px  border

但是,firefox 3.6和Safari 4都显示：(没有在其他浏览器中测试)

Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png

1px border7px padding4px content (with 15px text) => height - 2 * border - 2 * padding7px padding1px 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将无效.

总结

以上是内存溢出为你收集整理的html – Firefox / Safari设置高度为[指定高度 – 填充 – 边框]输入[type = button]全部内容，希望文章能够帮你解决html – Firefox / Safari设置高度为[指定高度 – 填充 – 边框]输入[type = button]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。