Jquery / CSS IE6问题

Question

这是一个非常有趣的问题。基本上我会动态添加一些li标签：

var fileList =  $("#openWin ul");

for (var i = 0; i<20; i++){
  fileList.append("<li>"+i+"<\/li>");
}

我的li标签有一些css：

li{
  list-style : none;
  font-size : 12px;
  margin: 0;
  padding : 5px 10px 5px 10px;
  border-bottom : 1px solid #cccccc;
  font-family : Georgia, serif;
  background-color : white;
  cursor : pointer;
}

这在IE6中似乎不起作用。前几个li标签似乎没有完全应用于它们的css：

Here is a link to the live file.我尝试为此设置jsFiddle和jsBin，但这些网站似乎都没有在ie6中正常运行。

奇怪的是，如果我向li标签添加一些事件，就会出现同样的问题。添加此代码：

 $("#openWin li").live('mouseover', function(){
    $(this).css({"background-color": "#ededed"});
 }).live("mouseout", function(){
    $(this).css({"background-color": "white"});
 });

可行，但前几个li标签行为奇怪。我将继续努力，任何意见都将不胜感激。

Answer 1

从图像看起来CSS除边框底部外都有效。 尝试：

for (var i = 0; i<20; i++){
  fileList.append("<li style=\"border-bottom:1px solid #cccccc;\">"+i+"<\/li>");
}

Answer 2

@Zevan：在position: relative; CSS中注释掉#files。这应该解决问题。

#files {
    background-color: white;
    height: 450px;
    margin: 10px;
    overflow: auto;
    /*position: relative;*/
    width: 230px;
}

Answer 3

看起来像一个hasLayout问题 - 尝试将zoom:1添加到您的li样式中。另一种选择是为您要添加的文本添加空格，如下所示：

fileList.append(" <li>"+i+"<\/li>");

Answer 4

在循环中尝试：

$("<li>").text(i).appendTo(fileList);