动态生成且兼容浏览器的等宽菜单项

Question

我正在创建一个导航菜单，其中每个菜单项的宽度都需要相等，总宽度为 970 像素。项目的数量是动态的（有时是 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 中，这非常准确。有更好的方法吗？

Answer 1

使用 Math.floor 或其他东西来四舍五入你的数字。

另一种方法是使用一个好的旧表：

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