IE6 rendering bug. Some parsed <li> elements are losing their closing tags
I have been working with IE6 for many years [sob], but have never seen this particular bug before, and I can't seem to find a reference to it on the Web. The problem appears to be with how IE6 is parsing the HTML of a nested list. Even though the markup is correct, IE6 somehow munges the code when it is parsed, and drops the closing tags of some of the <li> elements.
For example, take the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div>
<ul>
<li><a href=''>Child A</a>
<div>
<ul>
<li><a href=''>Grandchild A</a></li>
</ul>
</div>
</li>
<li><a href=''>The Child B Which Is Not A</a>
<div>
开发者_高级运维 <ul>
<li><a href=''>Grandchild B</a></li>
<li><a href=''>Grandchild C</a></li>
</ul>
</div>
</li>
<li><a href=''>Deep Purple</a></li>
<li><a href=''>Led Zeppelin</a></li>
</ul>
</div>
</body>
</html>
Now take a look at how IE6 renders this code, after it has run it through the IE6 rendering engine:
<HTML>
<HEAD>
<TITLE>My Page</TITLE></HEAD>
<BODY>
<DIV>
<UL>
<LI><A href="">Child A</A>
<DIV>
<UL>
<LI><A href="">Grandchild A</A> </LI>
</UL>
</DIV>
<LI><A href="">The Child B Which Is Not A</A>
<DIV>
<UL>
<LI><A href="">Grandchild B</A>
<LI><A href="">Grandchild C</A> </LI>
</UL>
</DIV>
<LI><A href="">Deep Purple</A>
<LI><A href="">Led Zeppelin</A> </LI>
</UL>
</DIV>
</BODY>
</HTML>
Note how on some of the <li> elements there are no longer any closing tags, even though it existed in the source HTML.
Does anyone have any idea what could be triggering this bug, and if it is possible to avoid it? It seems to be the source of some visual display problems in IE6.
Many thanks for any advice.
The </li> is not required in pure HTML (non-XHTML) mode. The same applies to </p> and a few more closing tags. The IE6 engine might have "optimized" them away somehow.
Here's an extract from the W3C spec about the <li> element:
<!ELEMENT LI - O (%flow;)* -- list item --> <!ATTLIST LI %attrs; -- %coreattrs, %i18n, %events -- >Start tag: required, End tag: optional
Note the last line.
The visual display problems you're talking about are more often related to hasLayout bugs.
加载中,请稍侯......
精彩评论