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:
The CSS Box Model is used to create a definition for the way the HTML elements are organized on the screen. This approach accounts for options such as margins, padding, borders, and all the properties that manipulate them. Each element can be thought of as having its own box.
border-box and content-box are the two different values of box-sizing. content-box: This is the default value of box-sizing. The dimension of element only includes 'height' and 'width' and does not include 'border' and 'padding' given to element. Padding and Border take space outside the element.
Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
The box-sizing CSS property sets how the total width and height of an element is calculated.
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 }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With