jQuery/CSS IE6 问题答案

【问题标题】：Jquery/CSS IE6 issuejQuery/CSS IE6 问题
【发布时间】：2019-11-11 06:29:15
【问题描述】：

这是一个非常有趣的问题。基本上我正在动态添加一些 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 标签的行为很奇怪。我将继续努力，任何意见将不胜感激。

【问题讨论】：

链接被破坏了一秒钟......修复它
我在 mouseout 处理程序中推荐这个：$(this).removeAttr("style")
我会试一试...考虑用 div 替换它们，看看是否能解决问题。

标签： jquery html css internet-explorer-6

【解决方案1】：

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

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

【讨论】：

非常酷。添加缩放修复它:) 你能解释一下你为什么这么认为吗？
添加缩放在所有 li 标签之间创建了一个 1px 的空间，所以我决定使用 div... 非常奇怪的东西。感谢您的帮助。
@Zevan：将您的li CSS 从margin: 0; 更新为margin: 0 0 -1px 0; 应该可以解决这个问题，但是您使用的哪些其他事件不适用于position: relative 注释掉了？
@Zevan：难以简单解释；实际上 IE 无法识别这些元素的边界。这是一个很好的资源：@987654321@
酷。我会用 li css 试试。也会看那个链接

【解决方案2】：

从图片看，除了边框底部之外，CSS 都可以正常工作。试试：

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

【讨论】：

谢谢，这会奏效。虽然不能解决事件问题。

【解决方案3】：

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

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

【讨论】：

至于“为什么”，归结为另一个 IE6 错误；它看起来非常类似于 IE6 “Peekaboo”错误 -- positioniseverything.net/explorer/peekaboo.html，但这并不是因为您没有在任何地方使用 float。
有趣的是修复了 css。出于某种原因，在那之后没有任何事件起作用。我用 div 替换了 ul/li 的东西，它修复了一切。

【解决方案4】：

在循环中试试这个：

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

【讨论】：