css - Firefox 和 Opera/Chrome/IE 中的表单填充差异

Question

我的网站表单中的填充有问题。如果我为表单元素设置了高度/宽度，然后向其添加了填充。在我尝试过的所有浏览器中，除 Firefox 外，填充都添加到高度/宽度。

如果我有一个宽度为 200 像素、高度为 20 像素的输入。填充为 5(所有方式)，宽度和高度的总和为 210px 和 30px，但在 Firefox 中为 200px 和 20px。

我该如何解决这个问题？

Answer 1

给 input 这个 CSS:

box-sizing: border-box;

您可以在 QuirksMode 上阅读有关 box-sizing 的更多信息, the W3C spec , 和 MDN .这是 its browser support .如果您的目标浏览器需要，请使用前缀 -moz- 或 -webkit-。

---

此答案之前建议值 initial，我是通过使用 Chrome Web Inspector 中的向上/向下箭头键找到的。但事实证明initial是一个CSS关键字，适用于任何属性，代表属性的初始值——浏览器的默认值。 initial 不如明确命名要使用的框模型安全。如果指定了 box-sizing: initial 并且浏览器的 box-sizing 默认值发生更改，则 input 的填充可能会再次中断。