代码如下:
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div>6</div>
</ul>理论上:UL 元素下有6个儿子,5个LI,1一个DIV,但是:在IE中,alert(document.getElementById("u1").childNodes.length);输出值为5,且代码解析后会变成如下:
<UL>
<LI>1
<LI>2
<LI>3
<LI>4
<LI>5
<DIV>6</DIV></LI>
</UL>
很明显,在IE下,自动的帮LI去除了封口,仅仅在最后一个加上了</LI>,而且他把最后一个元素加到了最后一个li中,这样导致在检测UL下有多少元素时,根本检测不对了。这个问题,不知道是和我引用的标准有关,还是有没有其他原因,或者是IE的问题?暂不清楚,不知道大家有没有遇到!而在FF中,如上代码 alert(document.getElementById("u1").childNodes.length);输出值却是13;
原因是,这种格式
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div>6</div>
</ul>
存在换行,FF会认为也是一个元素,虽然你在代码中没有写,所以,写成
<ul id="u1"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><div>6</div></ul>
就OK了,输出子元素个数6,且代码解析之后,仍然和源码是相同的!
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div>6</div>
</ul>理论上:UL 元素下有6个儿子,5个LI,1一个DIV,但是:在IE中,alert(document.getElementById("u1").childNodes.length);输出值为5,且代码解析后会变成如下:
<UL>
<LI>1
<LI>2
<LI>3
<LI>4
<LI>5
<DIV>6</DIV></LI>
</UL>
很明显,在IE下,自动的帮LI去除了封口,仅仅在最后一个加上了</LI>,而且他把最后一个元素加到了最后一个li中,这样导致在检测UL下有多少元素时,根本检测不对了。这个问题,不知道是和我引用的标准有关,还是有没有其他原因,或者是IE的问题?暂不清楚,不知道大家有没有遇到!而在FF中,如上代码 alert(document.getElementById("u1").childNodes.length);输出值却是13;
原因是,这种格式
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div>6</div>
</ul>
存在换行,FF会认为也是一个元素,虽然你在代码中没有写,所以,写成
<ul id="u1"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><div>6</div></ul>
就OK了,输出子元素个数6,且代码解析之后,仍然和源码是相同的!
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div>6</div>
</ul>对于这种错误的嵌套,IE中会将没有在LI中的元素,自动的被离他近的LI元素包含所以,解析完之后,在IE中就变成了:
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5
</li><div>6</div></li>
</ul>不只是DIV,其他元素也会被包到LI中。
而Firefox则不会那样处理。
看来ul最好不要放其他的标签,就像table中只放tr、tr中放td,而不能table嵌套div什么的