Firefox 3.6.12 与 CSS 盒模型

Question

自从我将 FF 更新到 3.6.12(或者至少在那个时候我注意到了这个问题)之后，我就遇到了一个不寻常的情况。虽然 Chrome 和 Opera 使用 content-box 框模型，但 Firefox 似乎已经开始使用 border-box。现在我正在设计一些高度为 39 像素、底部边框为 1 像素(总高度:40 像素)的表格标题。

除了内容框高 38px 的 FF，它到处都显示 OK。

如果有用的话，我使用的是 Windows 7 Professional 32 位，但也在我同事的计算机 (Windows XP Professional) 上注意到了这一点。

我的 CSS(为便于阅读而简化)就是这样，没有什么花哨的:

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

将框模型显式设置为内容框没有任何效果，就好像边框框是在内部用 !important 设置的一样(有点像 Chrome 对自动填充表单域背景的处理) )

这 1 个像素的差异不会使我的样式分开(我没有让它像素完美)，但我仍然对我的 FF 改变其行为感到非常沮丧。所以，我的问题是:

1. 你的情况也一样吗？ (如果不是，那可能是我的 CSS 中的一些错误)
2. 如果是这样，FF 团队是否决定反对 W3C 并更改默认的盒子模型？
3. 如果是这样，您是否碰巧知道为什么以及我在哪里可以找到有关它的一些信息(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 前缀:即 table { -moz-box-sizing: content-box }