Firefox 3.6.12 vs CSS box
自从我更新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改变其行为感到非常不安。 所以，我的问题是：
OK，用户代理样式表阿尔卡纳以您的方式出现：
出于某种原因，FF在其默认样式表中设置了table { -moz-box-sizing: border-box } 。 IE8（但不是7）。 其他浏览器使用默认的box-sizing: box-content 。 我不知道为什么FF做到这一点，违背了W3C的默认价值。 这里有一个很长的讨论：为什么在Firefox中将表格框设置为边框？
要覆盖它，请使用-moz前缀：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;
}
好，所以我对此做了一些测试，在Chrome 8，Opera 11和Firefox 4中，TR的高度都一样。
Firefox 4pre8
Chrome 8
歌剧11
在Opera和Firefox中，TH的高度为38px，而不是39px，似乎WebKit在这里有一个错误，它报告TH上的高度不正确，同时仍然应用与其他两个浏览器相同的规则。
快速叠加3种不同的效果图证明，除了文本渲染和宽度外，没有任何区别：
你真的做过图形测试吗？ 只是盲目信任这些工具可能会产生误导。
链接地址: http://www.djcxy.com/p/75577.html