Question

我有IE的问题（我一个人吗？他，他）。

我生成一个带背景的列表。第一个LI和最后一个LI是5px高，而其他LI是16px高。

IE在第一个LI和第二个LI之间留出空白。当然，FF＆amp; 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

您正在添加一个没有内容且高度为5px的空li（li_haut）。尝试将其行高设置为5px或添加间隔gif（颤抖）以使IE尊重该高度。我敢打赌，如果你使用的是IE Developer工具，你会发现第一个LI就是这个差距。

应用该顶级样式的更好/不同方式是在UL上具有背景，而不是添加打包/清空第一LI。或者将顶部容器图像作为背景放在包含UL的容器上，并将UL背景设置为底部，这样您就没有额外的LI。

除此之外，我建议将其放入变量以减少查找次数，而不是$("#conteneur ul")。

Answer 2

不确定这是否有效，但请尝试提供.li_haut课程overflow:hidden。

.li_haut {
    height:5px;
    overflow:hidden;
    background:url(images/modele/li_haut.gif) no-repeat;
}

Answer 3

您可能还会发现在每个新项目中使用CSS reset stylesheet很有用。

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

3 个答案: