Style anything in IE

A lot of people have been writing about this recently, and I can't take credit for discovering it. I first saw it here and then again here, but I'll recap it briefly on this blog for anyone who is too lazy to follow those links.

Under normal circumstances, IE won't allow you style tags that it doesn't recognize. But there is an interesting quirk in IE that will allow you to work around this and style unknown elements. All you have to do is create an element whose tag name is that which you desire to style, like so:

document.createElement('myNewTag');
Note that there is no need to actually add the newly created element to the DOM, or even store it in a variable. Just the process of "creating" the element is enough to "wake IE up" to the fact that such a tag exists.

With the Javascript in place, you could then do:

<style type = "text/css">
myNewTag
{
   border: 5px solid #f00;
   background: #00f;
   font-weight: bold;
}
</style>
<myNewTag>Brand new tag that has never existed before!</myNewTag>

Now IE will happily style all <myNewTag> elements with a red border, a blue background and bold text.

This goes for any tag that IE would not normally recognize, but it may prove especially useful in handling HTML5 down the road.

So there ya go... another IE quirk "to the rescue."

Got something to say?

Please note: Constructive criticism is welcome. Rude or vulgar comments however, are not and will be removed during moderation.