Question

我的Firefox有css身高问题。

我在页面上输入了type="submit"并height:20px, padding-bottom:3px. 因此，firebug显示该按钮具有height 17px和padding-bottom: 3px，因此总高度 20px 而不是 23px 。

有人可以帮我弄清楚这是firefox还是firebug的问题？

这是链接http://jsfiddle.net/tKZ5Y/ 您可以使用Firebug检查呈现的提交按钮

Answer 1

填充对按钮（和大多数表单字段）的工作方式不同。填充包含在宽度和高度中（除非宽度是动态的（即按钮的默认值），然后将填充添加到宽度）。

我只是tested this在Firefox，IE，Chrome和Opera中，它在所有内容中都是一致的。

唯一的区别是，当文本的高度变小时，Opera的反应有点不同，即垂直居中而不是将其置于顶部填充下方。

Answer 2

填充是内部框中包含的“边距”。保证金在框外。

在<input>内填充只会将输入中的文本对齐。如果您使用padding-top和padding-bottom 10px以及text 10px，则文本将位于30px容器的中间。

另请注意，Firefox在提交输入中放置的文本比所有其他浏览器低一些。虽然有一个修复。

Answer 3

使用margin而不是padding ..填充是在元素内容边距内扩展设置的

Answer 4

这不是问题，这是输入组件的正常行为

Answer 5

PPK says it's a bug。当我向按钮声明padding-bottom时，Chrome似乎没有任何反应，所以...我不知道。我想，最重要的是你可以使用以下方法在Firefox和Opera（至少）中解决这个问题：

input[type=submit] {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Answer 6

对于网站compat，

<input type="submit">在Gecko的UA样式表中设置为-moz-box-sizing: border-box。如果您需要非默认行为，请相应地调整框大小调整样式。