Firefox 3.6.12 vs CSS box-model

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没有任何效果,就好像border-box是在内部设置的!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默认值.这里有一个很长的讨论:为什么在Firefox中将框大小设置为边框？.

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