Элементы меню равной ширины, созданные динамически и совместимые с браузером

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>