|
接下來，包圍這組3個(gè)選項(xiàng)卡的ul.tab3，定義了每個(gè)選項(xiàng)卡的寬度：（再次感謝iPhone，感謝CSS3，讓我能用上:last-child這樣的高級(jí)選擇器。）
.tab3 li{float:left;width:33.3%;}
.tab3 li:last-child{width:33.4%;}
理想情況下，這種劃分的結(jié)果是怎樣的呢？讓我們看這個(gè)表格：
但是，瀏覽器實(shí)際是如何解析這個(gè)百分比的呢？通過Firebug查看Firefox下這個(gè)寬度的被計(jì)算出的值是：
以上取值是在Firebug的“布局”模塊下看到的高度值；而在“計(jì)算出的樣式”下看到的，是跟表1接近的數(shù)值，上表中的值可以近似看成是計(jì)算值四舍五入后的一個(gè)整數(shù)——但Firefox的實(shí)際表現(xiàn)跟計(jì)算值還是有關(guān)系的，有時(shí)即使這個(gè)布局值已滿足了，仍然會(huì)出問題。
我們還是主要來看iPhone和Android上的自帶瀏覽器又是怎么解析的。通過Safari和Chrome自帶調(diào)試工具，我們看到這兩種webkit內(nèi)核瀏覽器對(duì)這一寬度的解析是一樣的：
實(shí)事再次證明，一個(gè)好的開發(fā)利器對(duì)我們的工作幫助是巨大的。從這組數(shù)據(jù)我們發(fā)現(xiàn)，原來Safari和Chrome對(duì)這個(gè)寬度的取值跟Firefox是不一樣的，并非四舍五入的取法，而是直接忽略小數(shù)部分，保留整數(shù)部分！寬度為33.3%的選項(xiàng)卡比實(shí)際估計(jì)值少了1px，這就是上圖中選項(xiàng)卡寬度比內(nèi)容寬度短了幾個(gè)像素的原因。事實(shí)上，在查看了5個(gè)選項(xiàng)卡后，發(fā)現(xiàn)也存在同樣的問題。
現(xiàn)在要做的就是要找到一個(gè)或幾個(gè)合適的值，按照這種計(jì)算方法能使幾個(gè)選項(xiàng)卡寬度之和等于總寬度——同時(shí)在縱向(312px)和橫向（472px）情況下。
還是以3個(gè)選項(xiàng)卡為例，假設(shè)我們的劃分法是前2個(gè)選項(xiàng)卡寬度一樣，最后一個(gè)跟前2個(gè)稍微有點(diǎn)差別——我們已經(jīng)看出來，想找到三個(gè)完全相等的整數(shù)湊起來等于472是不可能的了。
對(duì)Safari瀏覽器，要滿足的是：
（312*X） + （312*X）+（312*Y）=312，同時(shí)（472*X） + （472*X）+（472*Y）=472
（注意，每個(gè)括號(hào)的數(shù)值只取整數(shù)部分，X和Y越相近越好，并且應(yīng)在4位小數(shù)以內(nèi)，更精確下去就沒什么用了。）
出處：騰訊WSD
責(zé)任編輯：bluehearts
上一頁 一個(gè)選項(xiàng)卡寬度的哥德巴赫猜想 [2] 下一頁 一個(gè)選項(xiàng)卡寬度的哥德巴赫猜想 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 一個(gè)選項(xiàng)卡寬度的哥德巴赫猜想 [3]
