又见邪恶的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);

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

 

 

 

 

评论

3 楼 clone168 2009-09-07  

<div class="quote_title">kimmking 写道</div>
<div class="quote_div">
<p>ie中，把所有的&lt;/li&gt;去掉，结果还一样。<br>说明ie中li是作为一个非闭合的标签来用的。<br>每个li的作用范围是从本li到下个li，如果是最后一个li，一直到/ul才结束。</p>
<p>测试：<br>&lt;ul id="test"&gt;</p>
<p>  &lt;!-- comment_begin --&gt;</p>
<p>  &lt;li&gt;asdf&lt;/li&gt;</p>
<p>  &lt;li&gt;asdf&lt;/li&gt;</p>
<p>  &lt;li&gt;asdf&lt;/li&gt;</p>
<p>  &lt;!-- comment_end --&gt; sas</p>
<p>&lt;/ul&gt;</p>
<p> </p>
<p>输出的 innerHTML为</p>
<p><span><span>&lt;!-- comment_begin --&gt;   </span></span></p>
<p><span>&lt;LI&gt;asdf   </span></p>
<p><span>&lt;LI&gt;asdf   </span></p>
<p><span>&lt;LI&gt;asdf &lt;!-- comment_end --&gt;sas &lt;/LI&gt;  </span></p>
<p>证明上面的观点是对的。</p>
<p>同时需要注意的是，li中每行的crlf被当做空白符处理了。</p>
<p> </p>
<p> </p>
</div>
<p>呵呵，邪恶的IE，解析页面的机制和其他的都不一样</p>

2 楼 lw223 2009-09-07  

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

  <li>asdf</li>

  <li>asdf</li>

  <li>asdf</li>

</ul>

<!-- comment_end -->

1 楼 kimmking 2009-09-07  

<p>ie中，把所有的&lt;/li&gt;去掉，结果还一样。<br>说明ie中li是作为一个非闭合的标签来用的。<br>每个li的作用范围是从本li到下个li，如果是最后一个li，一直到/ul才结束。</p>
<p>测试：<br>&lt;ul id="test"&gt;</p>
<p>  &lt;!-- comment_begin --&gt;</p>
<p>  &lt;li&gt;asdf&lt;/li&gt;</p>
<p>  &lt;li&gt;asdf&lt;/li&gt;</p>
<p>  &lt;li&gt;asdf&lt;/li&gt;</p>
<p>  &lt;!-- comment_end --&gt; sas</p>
<p>&lt;/ul&gt;</p>
<p> </p>
<p>输出的 innerHTML为</p>
<p><span><span>&lt;!-- comment_begin --&gt;   </span></span></p>
<p><span>&lt;LI&gt;asdf   </span></p>
<p><span>&lt;LI&gt;asdf   </span></p>
<p><span>&lt;LI&gt;asdf &lt;!-- comment_end --&gt;sas &lt;/LI&gt;  </span></p>
<p>证明上面的观点是对的。</p>
<p>同时需要注意的是，li中每行的crlf被当做空白符处理了。</p>
<p> </p>
<p> </p>