jquery - IE 在一个非常简单的菜单中的第一个 LI 之后添加一个垂直空间

Question

我的 IE 有问题(只有我一个人吗？他，他)。

我制作了一个带有背景的列表。第一个 LI 和最后一个 LI 高 5px，其他 LI 高 16px。

IE 在第一个 LI 和第二个 LI 之间留出一个空格。当然，FF 和 Safari 工作正常。

我试了很多东西都没有结果。但我不知道如何管理它...

这是我的 CSS:

ul {
    list-style:none;
    margin:40px;
}
li {
    padding:0px;
    margin:0px;
    width:137px;
    height:0px;
    padding-left:10px;
}
.li_norm {
    height:16px;
    background:url(images/modele/li_norm.gif) no-repeat;
}
.li_over {
    color:#ffffff;
    font-weight:bold;
    height:16px;
    background:url(images/modele/li_over.gif) no-repeat;
}
.li_haut {
    height:5px;
    background:url(images/modele/li_haut.gif) no-repeat;
}
.li_bas {
    height:5px;
    background:url(images/modele/li_bas.gif) no-repeat;
}

这是我的 jQuery 代码:

$("#conteneur").append('<ul />');
$("#conteneur ul").append('<li class="li_haut"></li>');
var a= ["Essai 1", "Essai 2", "Essai 3"];
for (var i = 0, j = a.length; i < j; i++) {
    $("#conteneur ul").append('<li id="new_'+i+'" class="li_norm">'+a[i]+'</li>');
}
$("#conteneur ul").append('<li class="li_bas"></li>');

这是我的问题的图片:

Bad IE comportment with LI

感谢您的帮助。

Asterix93

Answer 1

您要添加一个没有内容且高度为 5 像素的空 li (li_haut)。尝试将其行高设置为 5px 或添加间隔 gif(不寒而栗)以使 IE 尊重该高度。我敢打赌，如果您使用 IE Developer 工具，您会发现第一个 LI 就是造成这种差距的原因。

应用该顶级样式的更好/不同的方法是在 UL 上有背景，而不是添加包装/空的第一个 LI。或者将顶部容器图像作为背景放在包含 UL 的容器上，并使 ULs 背景位于底部，这样您就没有额外的 LIs。

除此之外，我建议不要到处都是 $("#conteneur ul")，我建议将它放入一个变量中以减少查找次数。