I just wanted to clarify a little. Below is the DOM trees that the different
browsers use for the following document:
> <?xml version='1.0' encoding='UTF-8' standalone='yes'?>
> <?xml-stylesheet type="text/css" href="#css"?>
> <document>
> <style id="css">
> {}
> style {display:none;}
> document {display:block;background-color:#3080af;}
> </style>
> <contents>
> Hello, World!
> </contents>
> </document>
If you understand how the browsers create their DOM trees it might be easier
to understand why some css rules don't match.
IE (5.0, 5.5, 6.0):
Document
+ html:html
+ html:head
+ html:link
+ html:body
+ document
+ style
+ TextNode
+ contents
+ TextNode
Opera (Tested on 5.10 win32)
Document (Not included in DOM model, so taking parent of document returns
undefined)
+ [object HTMLdocumentElement]
+ [object HTMLstyleElement]
+ [object HTMLcontentsElement]
Mozilla ( Gecko/20010412 )
[object Document]
+ [object Element] (tagName => document)
+ [object Text] (empty text node)
+ [object Element] (tagName => style)
+ [object Text] (content of style element)
+ [object Text] (empty text node)
+ [object Element] (tagName => contents)
+ [object Text]
+ [object Text] (empty text node after contents)
Also notice how IE removes empty text nodes between elements
erik arvidsson
webfx.eae.net
