iT邦幫忙

6

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-sizing
Firefox用-moz-box-sizing

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

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

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

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


尚未有邦友留言

立即登入留言