為什麼比較小?和塑化劑無關啦~
在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-sizing
Firefox用-moz-box-sizing

至於可設定的屬性有content-box、border-box，content-box是預設值，也就是寬、高屬性指派給內容區域，而border-box則是舊IE的方式。

就這樣FF犯的錯就可以修正回來了。

建議可以把這行加到css reset當中，省得不小心又誤中。

首發於向Web前端技術進軍，歡迎大家加入