由IE一例处理comment节点的bug得到的结论

近期处理一个项目，需要“翻译”页面的注释节点。功能在Firefox下一切正常，项目进行非常顺利。拿到IE全系列下，却非常不正常，把注释翻译成ELEMENT Node，页面立刻飞掉。检查不出来原因，抓狂了好几天。

后来发现，问题出在IE渲染li的时候。我们的项目里，有时候要求注释节点需要插入在li的后面。虽然这不太标准，但是实际应用中，也是没办法的事。IE6+会把注释节点包进li里面，真是无语。

例如页面上的代码：

<ul id="test">
  <!-- comment_begin -->
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <!-- comment_end -->
</ul>

试试document.getElementById(“test”).innerHTML，弹出：

<!-- comment_begin -->
<LI>asdf
<LI>asdf
<LI>asdf <!-- comment_end --></LI>

用IE8的开发者工具，也能看到同样的效果。IE其实是用这个代码来渲染页面的。最后的解决办法只好先“预处理”一下，把注释节点挪出来，大概是这样：

var lis = document.getElementsByTagName("li");
for (var i = 0, l = lis.length; i < l; i++) {
  if (lis[i].lastChild.nodeType === \8) {
    lis[i].parentNode.appendChild(lis[i].lastChild);
  }
}

这个bug说明一个问题，IE系列浏览器，包括IE8，内部的渲染还是使用的陈旧的HTML渲染方式，哪怕页面的文档类型DOCTYPE是xhtml。像这次遇到的问题，真是很难发现。IE浏览器真是无端耗费我们的青春啊！