Firefox的table为什么比其他的浏览器小?FF的table box model 修正

为什么比较小?和塑化剂无关啦~
在CSS中有所谓的box model，举例来说，一个div的属性，由外而内，会有margin、border、padding以及所在的内容区域。而通常我们在指定width的时候，指定的宽度就是内容区域，而padding和border是不算在里面的。

过去IE 6以前的box model行为和大家都不一样，他把border、padding和内容区域加起来算成是总宽度，所以如果我今天有一个width为100，border是1、padding 是5的div，那么IE总宽度是100，而FF则是112。所以FF的Div看上去会比较大。

不过今天，我却遇上FF的box model跟随旧IE算法的问题，让FF的box比其他的都小。

后来google了一下，发现这好像是某版FF的奇怪设计(我的是3.6.12)，踩中就爆炸了。

幸好解法不难。

table {-moz-box-sizing: content-box }

透过这行，就可以把FF tbale的特异行为，修成和大家一样了。

box-sizing的属性是CSS3建议用来计算宽、高的方法，目前各家浏览器有其专用的设定方式:

IE(8+)使用box-sizing；Safari、Chrome用-webkit-box-sizingFirefox用-moz-box-sizing

至于可设定的属性有content-box、border-box，content-box是预设值，也就是宽、高属性指派给内容区域，而border-box则是旧IE的方式。

就这样FF犯的错就可以修正回来了。

建议可以把这行加到css reset当中，省得不小心又误中。

首发于向Web前端技术进军，欢迎大家加入