1. 程式人生 > >各瀏覽器對css百分比小數點的解析

各瀏覽器對css百分比小數點的解析

--廣告位佔位--

css百分比帶小數點,瀏覽器都支援,chrome、firfox、ie8及以上版本若css百分比除下來值帶小數或者css百分比帶小數點都會在容器內部分割寬度,各子元素會呈一定的規律分割寬度:如:

1090px平均分6分,每份16.66%,chrome顯示各元素:

第2、4個元素:181px

第1、3、5、6個元素:182px

贊助商連結

firefox及ie8及以上版本,雖然直接在偵錯程式中看到的盒模型解析出來的是內層每個都是182px,但若將width:16.66%改成width:182px會頁面而已會變形走樣,由些我們可以推斷為firefox及ie8及以上版本瀏覽器對內層有作寬度“妥協”處理,跟chrome解析出來的效果是一樣的,只是沒在盒模型中提現出來而已!

另外 ie7 中,對小數點解析有誤,要加個hack處理下:設*width:16.65%

雖然ie7下解析有出入,但我們不用181px 去代替 16.66%,是因為16.66%能使內部各分割元素組成的整體在頁面上看上去是呈水平居中顯示,瀏覽器解析:16.66%*6 和181px* 6,前者總和比後者總和多3px,前者總和等於外層寬度,後者總和比外層寬度小3px!

其實,css百分比除下來值帶小數或者css百分比帶小數點,經測試,各瀏覽器都是支援的,只是ie7下差異表現明顯,最簡單的css百分比後除下來值帶小數例子:

外層寬度是 99px,內層有兩個元素浮動,寬度是 50%。

理論上內層寬度算下來是 49.5px,但實際上:

Chrome 中,第一個元素是 50px,第二個元素是 49px,加起來剛好和外層寬度一樣。即:

而firefox、ie8及以上,直接在偵錯程式中看到的盒模型解析出來的是內層每個都是50px,但外層還是99px,據此我們可以理解為上述瀏覽器對內層有作寬度“妥協”處理,跟chrome解析出來的效果是一樣的,只是沒在盒模型中提現出來而已!

需要特別注意的是:ie7 中,直接按照四捨五入,內層兩個元素的寬度都是 50px,加起來超過外層寬度,即外層包容不下2個50px的內層,所以ie7下看到兩個內層是換行的!