Question

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 with !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)?

Answer 1

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 }