635654 - div added by appending to innerHTML does not respond to .class:hover in absence of doctype

Status: RESOLVED DUPLICATE of bug 197686

(Core :: CSS Parsing and Computation, defect)

Description

[Hexadecima]

User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b12pre) Gecko/20110220 Firefox/4.0b12pre
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b12pre) Gecko/20110220 Firefox/4.0b12pre ID:20110220030351

The URL included should explain it all. When no doctype is present, a div inserted into the page by adding it through parent.innerHTML += "<div>...</div>" will not respond to :hover events specified by its class. This may be by design somehow (since adding an HTML4 strict doctype to this file fixes the problem) but the same behaviour does not occur in Chrome 11.0.672.2 dev, and the :hover specified in the class-specific CSS selector works as it does when the doctype is present.

Reproducible: Always

Steps to Reproduce:
1. document.getElementById("container").innerHTML += '<div class="a">hover me!</div>"
2. .a:hover { border: 3px red solid; }
3. leave out doctype
Actual Results:  
The selector for just .class was obeyed, but not the .class:hover selector.

Expected Results:  
The .class:hover selector should have been obeyed.

Elements inserted into the HTML initially (obviously) do not have this problem; for whatever reason (perhaps my Javascript-fu is weak) I had trouble assigning a class/id to a div created through DOM manipulation. If this latter behaviour is as intended, then the element added by appending to innerHTML should not have responded to any class-specific CSS selectors at all.

This behaviour is easily avoided by adding a doctype.

Comment 2

[Boris Zbarsky [:bzbarsky]]

> Elements inserted into the HTML initially (obviously) do not have this problem;

Sure they do.  The behavior is the same no matter how you put the node in the DOM.

Comment 3

[Hexadecima]

Well, that will teach me not to wait five minutes for Bugzilla to finish searching before I file. Thanks guys.