2011-06-02 83 views
1

我正在創建一個導航菜單,其中每個菜單項需要寬度相等,總寬度爲970px。項目數量將是動態的(有時是6,7或5)。我遇到的主要問題是,我目前做這件事的方法:動態生成的等寬菜單項和瀏覽器兼容

$(document).ready(function() { 
    // Navigation Tab Width Calculation 
    var nCnt = $("#nav > li").length; 
    var navConstraint = 970 - (nCnt - 1); 
    var nWidth = navConstraint/nCnt; 

    //// Sets Distributed Width of items 
    $("#nav > li > a").css({ "width": nWidth + "px" }); 

    //// Sets Width of ul in submenus 
    $("#nav ul").css({ "width": nWidth + "px" }); 

    //// Sets Width of li in submenus 
    $("#nav ul li").css({ "width": nWidth + "px" }); 

    //// Sets Width of a tags in submenus width an adjustment for padding 
    $("#nav ul li a").css({ "width": nWidth - 10 + "px" }); 

    /// Width Fixes for first and last nav elements 
    $("#nav > li:first").css({ "margin-left": "0px" }); 

    //// Fixes the last item to fit the stock image width, by browser if necessary 
    var lastOffset = 1; 

    $("#nav > li a:last").width(nWidth - lastOffset); 

    //// Adds Vertical Centering for Menu Items 
    $("#nav").children("li").each(function() { 
      var nh = ($(this).find("a").find(".navText").height()); 

      if (nh < 20) { 
        $(this).find(".navTextPadder").height(11); 
      } 
      else { 
        $(this).find(".navTextPadder").height(7); 
      } 

    }); 

我遇到的問題是,IE瀏覽器不處理寬度爲好,不知道如果他們不能處理小數寬度或者不是,但它比FF中的要短,確切地說是非常可怕的。有一個更好的方法嗎?

+0

你可以創建一個[演示的jsfiddle(http://jsfiddle.net/)? – thirtydot 2011-06-02 20:50:35

+0

無論你如何做到這一點,最終的結果都不會總是重新加回到970像素。根據菜單項的數量,您必須解決幾個像素的問題。或者你必須弄清楚剩下的東西,並創建一個視覺彌補差異的div。如果刪除結果的小數部分並堅持使用整數,則至少在瀏覽器與瀏覽器之間保持一致。 – Sparky 2011-06-03 21:53:50

+0

我需要完成OP所要求的操作,但是當我嘗試創建一個生動的示例時,我顯然缺少一些東西:http://jsfiddle.net/fUK9W/1/ – 2011-09-08 19:47:50

回答

-1

使用Math.floor或其他來循環你的數字。

另一種方法是使用一個很好的舊錶:你的代碼

<table width="100%"> 
    <tr> 
    <td>content</td> 
    <td>content</td> 
    <td>content</td> 
    </tr> 
</table> 
+0

將計算的像素值舍入爲整數是一個非常好的主意。使用'

'佈局的元素只是草率的編程。 – Sparky2011-06-02 19:33:55

+0

使用一些簡單的,在所有瀏覽器支持的情況下,_used_是常態,並且確實填充了CSS中缺乏的東西是一個壞主意?你太過純粹主義了。用JavaScript解決佈局問題是一個壞主意。 – Kraz 2011-06-03 13:06:53

+0

是的......使用表格進行佈局是草率的,並建議人們使用它們進行佈局是不負責任的。你也誤解了OP的問題。如果他「動態地」更改菜單中的項目數量,則使用表格不會產生任何影響。 – Sparky 2011-06-03 14:58:20