百分比的細(xì)節(jié)--容器大小篇
更新時(shí)間:2007年04月02日 00:00:00 作者:
因?yàn)槠聊荒茱@示的最小單位是1px,對(duì)于像773*50%=386.5這樣帶數(shù)字的長度必須有所取舍。
測(cè)試頁面,一些瀏覽器的截圖標(biāo)寬度也在里面
IE:按四舍五入的方式計(jì)算。
Firefox:計(jì)算后的值忽略小數(shù)部分,但會(huì)把多出的長度分配給里面的各元素。 如果只多出1px,比如2*386=772,剩下的1px會(huì)到其中一個(gè)元素,優(yōu)先分配第一個(gè)元素,像773px分配給兩個(gè)50%時(shí)得到的是:387px和386px,分配給四個(gè)25%時(shí)得到的是:194px、193px、193px和193px; 而對(duì)于多出幾個(gè)px,如773*33.3%=257.409,773*33.33%=257.6409,由于忽略掉的小數(shù)不一樣,分配的原則也不一樣,找不到相關(guān)資料,以下是我的猜想,三個(gè)元素的,按四舍五入的方式分配,四舍的優(yōu)先分配給兩邊,五入的優(yōu)先分配給前邊兩個(gè),對(duì)于分配給三個(gè)元素以上的,多出部分自由分配,我找不到規(guī)律,但第一個(gè)一定會(huì)分配到。
FF還有一些奇怪的地方。Firefix測(cè)試頁面。1024寬度不會(huì)自動(dòng)分配,也許是因?yàn)橥鈱右彩菐?shù)的,導(dǎo)致1px沒分配,接著測(cè)試Firefox
Opera & Safari2:計(jì)算時(shí)忽略百分比的小數(shù)部分,計(jì)算后的值忽略小數(shù)部分,如果里面的元素大于計(jì)算后的寬度不會(huì)導(dǎo)致后面的元素?fù)Q行。
Netscape & Mozilla:計(jì)算后忽略小數(shù),多出部分有點(diǎn)類似Firefox,但多出部分是比透明顯示,而且比較奇怪,比如33.33%*3=99.99% 小于100%,但卻大于100%,奇怪的瀏覽器,還好使用的人不多,不用過于在意這兩個(gè)瀏覽器。
測(cè)試沒完成,有興趣的朋友幫忙測(cè)試,單獨(dú)的測(cè)試頁,有知道原因的朋友講一下下
測(cè)試頁面,一些瀏覽器的截圖標(biāo)寬度也在里面
IE:按四舍五入的方式計(jì)算。
Firefox:計(jì)算后的值忽略小數(shù)部分,但會(huì)把多出的長度分配給里面的各元素。 如果只多出1px,比如2*386=772,剩下的1px會(huì)到其中一個(gè)元素,優(yōu)先分配第一個(gè)元素,像773px分配給兩個(gè)50%時(shí)得到的是:387px和386px,分配給四個(gè)25%時(shí)得到的是:194px、193px、193px和193px; 而對(duì)于多出幾個(gè)px,如773*33.3%=257.409,773*33.33%=257.6409,由于忽略掉的小數(shù)不一樣,分配的原則也不一樣,找不到相關(guān)資料,以下是我的猜想,三個(gè)元素的,按四舍五入的方式分配,四舍的優(yōu)先分配給兩邊,五入的優(yōu)先分配給前邊兩個(gè),對(duì)于分配給三個(gè)元素以上的,多出部分自由分配,我找不到規(guī)律,但第一個(gè)一定會(huì)分配到。
FF還有一些奇怪的地方。Firefix測(cè)試頁面。1024寬度不會(huì)自動(dòng)分配,也許是因?yàn)橥鈱右彩菐?shù)的,導(dǎo)致1px沒分配,接著測(cè)試Firefox
Opera & Safari2:計(jì)算時(shí)忽略百分比的小數(shù)部分,計(jì)算后的值忽略小數(shù)部分,如果里面的元素大于計(jì)算后的寬度不會(huì)導(dǎo)致后面的元素?fù)Q行。
Netscape & Mozilla:計(jì)算后忽略小數(shù),多出部分有點(diǎn)類似Firefox,但多出部分是比透明顯示,而且比較奇怪,比如33.33%*3=99.99% 小于100%,但卻大于100%,奇怪的瀏覽器,還好使用的人不多,不用過于在意這兩個(gè)瀏覽器。
測(cè)試沒完成,有興趣的朋友幫忙測(cè)試,單獨(dú)的測(cè)試頁,有知道原因的朋友講一下下
相關(guān)文章
通過CSS Hack 區(qū)分 FF/IE7/IE6/IE5.5/IE5 代碼推薦
通過CSS Hack 區(qū)分 FF/IE7/IE6/IE5.5/IE5 代碼推薦...2007-01-01Firefox2中輸入框丟失光標(biāo)bug的解決方法
在Firefox2中某些情況下輸入框雖然可以輸入,但在獲取焦點(diǎn)時(shí)沒有文本輸入光標(biāo)的顯示,這個(gè)是非常惡心的bug,非常容易讓表單使用者有一種不能輸入的錯(cuò)覺,即使后來嘗試知道可以輸入,但也無法判斷光標(biāo)定位在哪兒。2008-05-05Zen Coding css,html縮寫替換大觀 快速寫出html,css
本文是在zen使用生產(chǎn)中遇到的問題做一些分享。2011-01-01手機(jī)屏幕尺寸測(cè)試——手機(jī)的實(shí)際顯示頁面的寬度
本文主要通過測(cè)試,得出手機(jī)端網(wǎng)頁實(shí)際顯示的寬度,給開發(fā)人員在做手機(jī)端開發(fā)的時(shí)候做一些參考,希望能幫到大家。2016-04-04div+CSS網(wǎng)頁布局的意義與副作用原因小結(jié)
隨著WEB2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及,國內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法,從實(shí)際應(yīng)用情況來看,此種方法絕對(duì)好于表格制作頁面的方法。2008-09-09