BUG: Links on DOM nodes don't match structure! RRS feed

  • Question

  • [Sorry if this is the wrong place for this but I could not find a way to report an IE bug. And another post in this forum mentioned that this was the place to post bug reports since the developers read the forum.]

    If an HTML document contains a block element inside of an inline element, the structure of the DOM does not match the parent and child links on the actual nodes! This turns the tree into a graph and causes infinite loops if the code relies on the parentNode and lastChild properties.

    I have created a sample web page that demonstrates the problem and have seen the same results on IE 6 and 7. There is no problem in Firefox or Safari browsers. The sample page can be found here:

    Just in case you can't access the sample page, I will describe it in this post.

    The structure of the sample HTML is the following:


    which builds a tree (in IE) like this:


    On other browsers, the H1 element is contained within the SPAN element. You could argue either way but, regardless of which way you argue it, this does not affect the problem being reported.

    The problem is that even though the browser "sees" the structure with the H1 element as a child of the P element, the node links on these DOM nodes does not agree with the structure. In IE, the nodes have the following wrong links:

    TD.lastChild = FONT
    P.lastChild = IMG
    SPAN.lastChild = H1
    H1.parentNode = SPAN

    I would like to get verification of this bug and also some feedback on when this could be fixed. Because if the bug is valid and programmers can't rely on the node links to be correct, this will cause serious problems in web applications.
    Monday, October 27, 2008 9:24 PM

All replies

  • Although it would be nice if IE handled this a bit more gracefully, the specs indicate that an Hx (block) element may not be nested inside a SPAN (inline) element.

    If you need a nesting like this, you will want to swap out the SPAN for a DIV which is a block level element.

    Let us know if you need any help refactoring the code.
    Wednesday, October 29, 2008 2:09 PM
  • The IE handling of this issue is not just un-graceful, it's completely wrong. Regardless of what the W3C HTML Recommendation says, HTML documents are notoriously incorrect in both structure and content; browsers need to deal with that. The rendering of these elements can be "wrong" but the structure can not. 

    Without seeing the code and using my outsider's perspective, it appears that this is caused by the tag balancer. IE creates a different DOM structure than other browsers by moving the location of the element node to a higher level block element (probably to try to match the proper structure from the spec as you stated). I have absolutely no problem with this as long as the node links are all updated appropriately. But as we can see in the sample document, this is not the case.

    Another point I'd like to make is that even though elements have an implicit display style (i.e. block, inline, etc), those styles can be modified via CSS. So any element can be a block and any element can be inline. However, I realize that when parsing the document, the browser simply applies its knowledge of the implicit display styles in order to properly balance the resulting DOM. I am not expecting the browser to apply the CSS display properties; I just thought it was an interesting point to make in this discussion.
    Friday, October 31, 2008 5:52 PM