又见邪恶的IE

 

记得上次为了一个空格符号花了很多功夫来研究，最后发现是IE以及firefox等浏览器之间对html的空格” ”解析机制不一样，幸而那个问题已经解决，今天又碰到一个问题。

代码是这样的：

<ul id="test">

  <!-- comment_begin -->

  <li>asdf</li>

  <li>asdf</li>

  <li>asdf</li>

  <!-- comment_end -->

</ul>

我用document.getElementById(”test”).innerHTML发现IE(IE7)下弹出结果为：

 

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

 

接着在ff以及chrome下面测试，结果为：

 

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

 

 

 

测试结果表明：IE会把注释节点包进li里面，无语了！

最后只好先“预处理”一下，把注释节点挪出来：

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);

              }

       }

alert(document.getElementById('test').innerHTML);

不知道各位还有什么好的办法没？

 

 

 

 

ie中，把所有的</li>去掉，结果还一样。
说明ie中li是作为一个非闭合的标签来用的。
每个li的作用范围是从本li到下个li，如果是最后一个li，一直到/ul才结束。

测试：
<ul id="test">

  <!-- comment_begin -->

  <li>asdf</li>

  <li>asdf</li>

  <li>asdf</li>

  <!-- comment_end --> sas

</ul>

 

输出的 innerHTML为

<!-- comment_begin -->   

<LI>asdf   

<LI>asdf   

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

证明上面的观点是对的。

同时需要注意的是，li中每行的crlf被当做空白符处理了。

 

 

<!-- comment_begin -->
<ul id="test">

  <li>asdf</li>

  <li>asdf</li>

  <li>asdf</li>

</ul>

<!-- comment_end -->

呵呵，邪恶的IE，解析页面的机制和其他的都不一样