Styling the ABBR tag in IE6

IE6 is a pain in the bum isn't it? Like some half assed zombie it keeps coming back from the dead to bite me. Anyway - on my current project ABBR tags are used quite a lot to explain some technical jargon, the tag working in IE6 (we have sufficient IE6 audience) is essential.

After everyone else had considered the problem and given up whilst I was away I was determined to proveĀ  a point and fix things, I had a few ideas, helped by some serious googling, most failed or were complex, the one I thought up all on my own is small, targeted and simple.

Fails:

  1. Get Jquery to spot the ABBRs, and replace them with spans, then style to fit (can;t target something the DOM doesn't believe exists).
  2. Use Marek Prokop's (2002 I admit) script to stick SPANs inside the ABBR and style that as well (works but way too big and inelegant in comparison, + adds extra mark up)

Success:

<!--[if IE 6]> <script>document.createElement('abbr');</script> <!--[endif]-->

Hijack the HTML5 Shiv, first (iThink) created by John Ressig and whack an old school ABBR in there rather than a fancy new shiny FIGURE tag :)

Enjoy!