javascript - 在 Internet Explorer 中出现两行的菜单

Question

我在 http://berrisford.gumpshen.com/ 有一个菜单使用以下 javascript 计算菜单项的填充。

这在 FIrefox 中工作正常，但在 IE 中，菜单项变得太长，最后一个菜单项溢出到一个新行。有人可以帮忙吗？

var finalWidth = 940;
var totWidth = 0;

var lis = $("header ul.lv1 > li").each(function () {
    totWidth += $(this).width();
});

var diff = finalWidth - totWidth;
var diffPer = diff / lis.length;

if (diff > 0) {
    $("header ul.lv1 > li a").each(function () {
        $(this).css('padding-right', diffPer / 2);
        $(this).css('padding-left', diffPer / 2);
    });

    var totWidth2 = 0;
    var lis2 = $("header ul.lv1 > li").each(function () {
        totWidth2 += $(this).width();
    });



    if ($.browser.msie) {
        var version = parseInt($.browser.version, 10);

        if (version < 9) {
            $("header ul.lv1 > li a").last().css('padding-right', (940 - totWidth2) - 20);
            var lastItemPaddding = (Math.floor(diffPer / 2) + (940 - totWidth2));
            $("header ul.lv1:last-child li:last-child a").css('padding-right', lastItemPaddding);
        }
    }
    else {
        var version = parseInt(detectBrowserVersion(), 10);

        if (version == 14) {

            $("header ul.lv1 > li a").last().css('padding-right', (940 - totWidth2) - 20);
            var lastItemPaddding = (Math.floor(diffPer / 2) + (940 - totWidth2));
            $("header ul.lv1:last-child li:last-child a").css('padding-right', lastItemPaddding);
        }
    }
}

http://berrisford.gumpshen.com/

Answer 1

我刚刚比较了 Firefox 10、Safari(最新)和 IE7。菜单只在 Safari 中看起来不错。在 Firefox 中，最后一个菜单项位于下一行，第一个菜单项下方。在 IE7 中，所有项目都在一行上，但 z-index 有问题。如果我将以下 CSS 添加到 header 元素，重叠将得到修复:

header {
    position: relative;
    z-index: 1;
}

我知道这不是您最初的问题，但 IE7 上有很多用户，所以我会考虑这个问题。

关于您的填充问题。我看到一些填充是 double 值。将它们更改为整数或降低值应该有所帮助:

var diffPer = parseInt(diff / lis.length, 10);

或者

var diffPer = Math.floor(diff / lis.length);

对所有部门都这样做。