设置 display: -moz-box 使元素在 Firefox 中使用边框大小答案

【问题标题】：Setting display: -moz-box causes elements to use border-box sizing in Firefox设置 display: -moz-box 使元素在 Firefox 中使用边框大小
【发布时间】：2011-09-05 14:15:03
【问题描述】：

我遇到了一个问题，通过将元素的显示属性设置为 display: -moz-box 会导致该元素开始使用 Firefox 中的 border-box 大小调整模型，即元素的宽度和高度包括填充和边框。这在基于 Webkit 的浏览器中不会发生。

这里是 JSFiddle 的链接，它说明了我在说什么： http://jsfiddle.net/S3BCa/

我想知道这是否是 Firefox 中的错误（如果是，似乎找不到任何有关它的文档），或者是否有解决方法可以使所有浏览器都保持一致？

【问题讨论】：

标签： firefox css

【解决方案1】：

是的，这是一个错误，目前只实现了border-box。这是有历史原因的，灵活的盒子模型最初是为 XUL 实现的，border-box 是唯一支持的大小模型。相关的错误是bug 73669 和bug 490359，bug 635692 表示一堆额外的问题。我想这最终会在-moz 前缀被删除之前得到解决，但是不知道什么时候会这样。

目前，在浏览器中获得一致行为的唯一选择是指定box-sizing: border-box。我认为没有更好的解决方案，抱歉。

【讨论】：

感谢 Wladimir，指定边框框以使所有浏览器保持一致是一个很好的解决方法。