從網(wǎng)頁選項卡誕生的那一天起，憑借其緊湊的布局和方便的切換方式，就成為各大門戶必用的設計元素。讓我們來看看這些五花八門的選項卡吧~

規(guī)則的寬度–比如150px、300px…合適的選項卡數(shù)量：2個、4個…使這些選項卡都恰好能平分寬度，在各大瀏覽器中完美呈現(xiàn)。

忽然有一天，當你的網(wǎng)站需要移植到iPhone，或是其他移動設備上，你得在一個寬度是320px–并且隨時有可能切換為480的屏幕上設計這樣一組切換卡時，問題就來了。

在手機，這種資源有限的移動設備上設計網(wǎng)頁的的第一原則是什么？那就是充分利用屏幕。我們的網(wǎng)頁兩邊不再會有幾十、幾百像素的空隙—取而代之的是僅僅幾個像素，在這個例子里，這個數(shù)值是4——當然你也可以取其他數(shù)值，但是問題還是同樣會存在的；隨著方向改變，手機屏幕的寬度也在切換,你的頁面內(nèi)容應該自適應這種變化，仍然充滿整個屏幕。

這時，我們的選項卡寬度就不能是一個固定值，而要使用百分比了。對于2、4、5這樣能被100%整除的數(shù)，這個取值很容易，每個選項卡的寬度就是50%、25%、20%；對于3、6、7這樣不能整除的數(shù)，應該怎么辦呢？哈，幸好我們還有一點數(shù)學基礎,以一組3個選項卡為例：33.3% + 33.3 + 33.4%這樣的分法也不錯，加起來能夠湊到100%，選項卡之間0.1%的寬度差，應該是0.3-0.4像素，可以忽略。好，讓我們看看這樣的分法結果如何？

FireFox、ie下，如上圖，非常和諧。

Safari和Chrome下：

哈哈，好像就不那么完美了。在選項卡數(shù)量為3、5個時，我們發(fā)現(xiàn)選項卡比下面的內(nèi)容寬度短了兩三個像素，這——是為什么呢~~？–小沈陽問。

讓我們先來看看這些選項卡的html代碼結構：

<div>
    <ul>
        <li><a href="#">今日要聞</a></li>
        <li><a href="#">直播大廳</a></li>
        <li><a href="#">今日要聞</a></li>
    </ul>
    <div></div>
</div>其中，包圍在最外面的div.w320，規(guī)定的是這個模塊的寬度，這里模仿iPhone豎屏時的寬度320px—橫屏時就是w480。這里我們給頁面兩邊留的空隙是4px，有效內(nèi)容寬度是312px。

.w320{width:312px; padding:0 4px; margin:5px 0;}接下來，包圍這組3個選項卡的ul.tab3，定義了每個選項卡的寬度：（再次感謝iPhone，感謝CSS3，讓我能用上:last-child這樣的高級選擇器。）

.tab3 li{float:left;width:33.3%;}
.tab3 li:last-child{width:33.4%;}理想情況下，這種劃分的結果是怎樣的呢？讓我們看這個表格：

但是，瀏覽器實際是如何解析這個百分比的呢？通過Firebug查看Firefox下這個寬度的被計算出的值是：

以上取值是在Firebug的“布局”模塊下看到的高度值；而在“計算出的樣式”下看到的，是跟表1接近的數(shù)值，上表中的值可以近似看成是計算值四舍五入后的一個整數(shù)——但Firefox的實際表現(xiàn)跟計算值還是有關系的，有時即使這個布局值已滿足了，仍然會出問題。

我們還是主要來看iPhone和Android上的自帶瀏覽器又是怎么解析的。通過Safari和Chrome自帶調(diào)試工具，我們看到這兩種webkit內(nèi)核瀏覽器對這一寬度的解析是一樣的：

實事再次證明，一個好的開發(fā)利器對我們的工作幫助是巨大的。從這組數(shù)據(jù)我們發(fā)現(xiàn)，原來Safari和Chrome對這個寬度的取值跟Firefox是不一樣的，并非四舍五入的取法，而是直接忽略小數(shù)部分，保留整數(shù)部分！寬度為33.3%的選項卡比實際估計值少了1px，這就是上圖中選項卡寬度比內(nèi)容寬度短了幾個像素的原因。事實上，在查看了5個選項卡后，發(fā)現(xiàn)也存在同樣的問題。

現(xiàn)在要做的就是要找到一個或幾個合適的值，按照這種計算方法能使幾個選項卡寬度之和等于總寬度——同時在縱向(312px)和橫向（472px）情況下。

還是以3個選項卡為例，假設我們的劃分法是前2個選項卡寬度一樣，最后一個跟前2個稍微有點差別——我們已經(jīng)看出來，想找到三個完全相等的整數(shù)湊起來等于472是不可能的了。

對Safari瀏覽器，要滿足的是：

（312*X） + （312*X）+（312*Y）=312，同時（472*X） + （472*X）+（472*Y）=472

（注意，每個括號的數(shù)值只取整數(shù)部分，X和Y越相近越好，并且應在4位小數(shù)以內(nèi)，更精確下去就沒什么用了。）

解這樣的方程式，有點類似哥德巴赫猜想了，好像有必要寫個程序來搞定。幸好這一次，我們有強大的笨笨熊童鞋，寫出了這樣一段程序：

public class test1 {
  private static float decimal = 0.0001f;
 public static void main(String[] args) {
  int count = 1;
  int result_x = 0;
  int result_y = 0;
  for (float x = 0.33f; x < 0.34f; x = x + decimal) {
   for (float y = 0.33f; y < 0.34f; y = y + decimal) {
   if (((Math.floor(312 * x) + Math.floor(312 * x) + Math.floor(312 * y)) == 312) &&
   ((Math.floor(472 * x) + Math.floor(472 * x) + Math.floor(472 * y)) == 472) ) {
    System.out.printf("x==>%.4f,y==>%.4f " ,x, y);
    }
   }
  }
  System.out.println("result_x==>" + result_x + ",result_y==>" + result_y);
 }
}好吧，相信萬能的機器，總是什么都能做出來的。運行以上程序，一下就輸出了幾百組結果，X取值從-33.06%—33.47%，Y從33.48%—33.4%，從中選出最接近的1組：

x=33.47%
y=33.48%好了，給CSS設置：

.tab3 li{float:left;width:33.47%;}
.tab3 li:last-child{width:33.48%;}大功告成！iPhone和Android自帶瀏覽器都表現(xiàn)完美了。

[再提一點，對Firefox瀏覽器要滿足的條件如下：

（312*X） + （312*X）+（312*Y）=312，同時（472*X） + （472*X）+（472*Y）=472，

基本上就是2X+Y=1，而通過程序運算，我們發(fā)現(xiàn)找不到這樣一組4位以內(nèi)的數(shù)值能同時滿足Firefox和Safari的條件，好在目前在高端機的網(wǎng)頁上，我們還不需要兼容Firefox——如果有誰知道-moz或-webkit設置寬度的私有屬性，請告訴我，可以分別給他們定義寬度。]

這樣就行啦！

這時，有一個弱弱的聲音在問：但是，請問，請問，我們每次都要這么痛苦么！

好，問的好！

在經(jīng)歷了這一番死去活來的推理計算后，一直覺得如鯁在喉，心有不甘。突然有一天，腦子里靈光一現(xiàn)，柳暗花明又一村…讓我們換個思路吧：一定要給每個選項卡定義精確寬度么？能不都定義么？如果我們只定義其中前N-1個，而讓最后一個自適應會如何？像這樣：

.tab3 li:not(:last-child){float:left;width:33.33%;}
.tab3 li:last-child{margin-left:66.66;}世界頓時簡單了！Firefox、Safari一次被搞定——ie下用，稍作修改即可。不論5個、7個，一個道理：前N-1個取最接近平均值的百分比，最后一個自適應，填充剩余空間。

正所謂大巧無術、大道至簡，換一種思路，海闊天空。

原文：http://wsd.tencent.com/2010/08/tab.html