我正在創建一個導航菜單,其中每個菜單項需要寬度相等,總寬度爲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中的要短,確切地說是非常可怕的。有一個更好的方法嗎?
你可以創建一個[演示的jsfiddle(http://jsfiddle.net/)? – thirtydot 2011-06-02 20:50:35
無論你如何做到這一點,最終的結果都不會總是重新加回到970像素。根據菜單項的數量,您必須解決幾個像素的問題。或者你必須弄清楚剩下的東西,並創建一個視覺彌補差異的div。如果刪除結果的小數部分並堅持使用整數,則至少在瀏覽器與瀏覽器之間保持一致。 – Sparky 2011-06-03 21:53:50
我需要完成OP所要求的操作,但是當我嘗試創建一個生動的示例時,我顯然缺少一些東西:http://jsfiddle.net/fUK9W/1/ – 2011-09-08 19:47:50