Question

自从我将FF更新到3.6.12（或者至少是我注意到这个问题的时候），我正处理一个不寻常的情况。虽然Chrome和Opera使用content-box框模型，但Firefox似乎已开始使用border-box。现在我正在设计一些桌面标题，高度为39px，底部有1px边框（总高度：40px）。

它在任何地方都显示OK，除了FF，内容框为38px高。

如果有任何用处，我使用的是Windows 7 Professional 32位，但在同事的电脑（Windows XP Professional）上也注意到了这一点。

我的CSS（简化了可读性）只是这个，没什么特别的：

table { border-spacing: 3px; }
table tr th { height: 39px; border-bottom: 1px solid red; }

将box-model明确地设置为content-box没有任何效果，就好像在内部使用!important设置了border-box ...（有点像Chrome使用自动填充表单字段背景所做的那样）

这1个像素的区别不会让我的造型分开（我不会让它像素完美），但我仍然对我的FF改变其行为感到不安。所以，我的问题是：

你的情况也会发生吗？（如果不是，那可能是我的CSS中的一些错误）
如果是这样，FF团队是否决定反对W3C并更改默认的箱型？
如果是这样，您是否碰巧知道为什么以及在哪里可以找到有关它的信息（Google拒绝提供帮助）？

Answer 1

好的，用户代理样式表奥秘就是你的方式：

出于某种原因，FF在其默认样式表中设置table { -moz-box-sizing: border-box }。和IE8一样（但不是7）。其他浏览器使用默认的box-sizing: box-content。我不知道为什么FF这样做，反对W3C默认值。这里有一个很长的讨论：Why is box sizing set to border-box for tables in Firefox?。

要覆盖它，请使用-moz前缀：ie table { -moz-box-sizing: content-box }

Answer 2

也许反转问题将是一个很好的解决方案：在所有情况下都尝试border-box！

table tr th
{
    height: 40px;
    border-bottom: 1px solid red;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}