INternet Explorer中的菜单分为两行

Menu running into 2 lines in INternet Explorer

本文关键字：两行 Explorer 菜单 INternet      更新时间：2023-09-26

我有一个菜单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/

我刚刚比较了Firefox 10、Safari（最新版本）和IE7。菜单只有在Safari中才好看。在Firefox中，最后一个菜单项位于第一个菜单项下方的下一行。在IE7中，所有项目都在一行上，但z索引有问题。如果我在头元素中添加以下CSS，则重叠是固定的：

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

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

关于你的填充问题。我看到一些填充是双值的。将它们更改为整数或将值设为下限应该会有所帮助：

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

或

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

对所有部门都这样做。

尝试使浮动元素比包含它们的容器小1个像素，即有时遇到问题，并将其拆分为新行。

所以给var finalWidth = 939;一个尝试，这应该会修复它。

更改finalWidth不会做太多工作，您还必须将代码中的"940"更改为finalWidth。

试试这个：

      var diffPer = (diff / lis.length) - 1; //(or -2)
相关文章：