Why doesn't Internet Explorer apply CSS to "invalid" elements?

Question

This works in chromium (and I assume every other major browser)

-html-

<invalid></invalid>

-css-

invalid {
    color: red;
}

<invalid> represents an invalid element (not part of the html standard)

here is an example: http://jsfiddle.net/myhonor/4H7Hj/

But when I try this in IE, it doesn't work.

why is this and is there a way fix this (is it a DTD thing?)

Answer 1

That's just the way Internet Explorer works, up to and including version 8. To fix it, just call document.createElement with the name of the invalid element:

document.createElement('invalid');

Here's your updated jsFiddle. It's the same idea as all those HTML5 shivs you see. And, as everyone else has already suggested, writing valid HTML is usually the best solution :)