Firefox 3.6.12 vs CSS box-model

Ever since I updated FF to 3.6.12 (or at least that's when I noticed the issue), I am dealing with an unusual situation. While Chrome and Opera use the content-box box model, Firefox seems to have started using border-box. Right now I'm styling some table headers with a height of 39px and a 1px border on the bottom (total height: 40px).

It displays OK everywhere, save for FF, where the content box is 38px high.

If it's of any use, I'm on Windows 7 Professional 32 bit, but also noticed this on my colleague's computer (Windows XP Professional).

My CSS (simplified for readability) is only this, nothing fancy:

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

Setting the box-model explicitly to content-box has no effect, as if border-box was set internally wi开发者_如何学JAVAth !important... (sort of like what Chrome does with autofill form field background)

This 1 pixel difference is not something that will take my styling apart (I'm not making it pixel-perfect), but I'm still really upset about my FF changing its behaviour. So, my questions are:

1. Does it happen in your case as well? (if not, it's probably some bug in my CSS)
2. If so, has the FF team decided to go against the W3C and change the default box-model?
3. If so, do you happen to know why and where I can find some info about it (Google refused to help)?

OK, User Agent Style sheet arcana coming your way:

for some reason, FF sets table { -moz-box-sizing: border-box } in its default stylesheet. As does IE8 (but not 7). Other browsers use the default box-sizing: box-content. I have no idea why FF has done this, against the W3C defaul value. there's a long discussion about this here: Why is box sizing set to border-box for tables in Firefox?.

to override it, use the -moz prefix: i.e. table { -moz-box-sizing: content-box }

Maybe inverting the problem would be a good solution: just try for border-box in all cases!

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;
}

OK so I did some tests on this, the TR's all have the same height in Chrome 8, Opera 11 and Firefox 4.

Firefox 4pre8

Chrome 8

Opera 11

In Opera and Firefox the TH has a height of 38px instead of 39px, it seems that WebKit has a bug here which reports the incorrect height on the TH while still applying the same rules as the other two Browsers.

And a quick overlay of the 3 different renderings proved that there's no difference besides the text rendering and the width:

Have you actually done a graphical test? Just blindly trusting the tools can be misleading.