Firefox 3.6.12 vs CSS box
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:
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: ie table { -moz-box-sizing: content-box }
也许反过来解决这个问题将是一个很好的解决方案：只要在任何情况下尝试border-box ！
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.
链接地址: http://www.djcxy.com/p/75578.html