Fixing <abbr> in IE with one line of JavaScript

One positive side-effect of the recent sugarstorm surrounding the announcement that IE8 will, as things stand, require developers to opt in to its new standards mode is this comment by Sjoerd Visscher, which I read several days ago but have been too preoccupied to post about until now. The (in)famous Ian Hickson referred to Sjoerd's revelation as "...probably the most noteworthy news of the day."

As soon as I saw Sjoerd's comment, I realised that the quirk could potentially provide a cruft-free and extremely simple, albeit JavaScript-dependent, solution to Internet Explorer's (pre-IE7) refusal to acknowledge the abbr element. One could of course use Dean Edwards' impressive IE7 library to haul IE into line regarding abbr and a great many other things, but I've always considered it overkill, and prefer to patch IE on a case-by-case basis. My preferred way to fix abbr in IE (with conditional comments):

<!--[if lt IE 7]>
<script type="text/javascript">document.createElement('abbr');</script>

Put that in your document's head section, et voilĂ , IE6 and IE5.5 now respect CSS styles for abbrs. The fix even makes IE display the title attribute tooltip on hover. Unfortunately, it seems not to work in IE5.01 - I can live with that limitation. The conditional comments should be optional, as I don't believe that the JavaScript would have any ill effect in other browsers (provided that they support document.createElement). It could also replace an existing script-based FOUC fix that developers may have employed.

Apparently, few people seem to have known about this fascinating IE quirk before, and as of the time I wrote this, I'd not seen anyone else mention its potential application to IE's abbr problem. I'm certain it's occurred to many people by now, but I'm noting it here explicitly because - quite honestly - it amuses me more than it should that such an annoying bug can be fixed in such a simple way. It also has interesting implications for "encouraging" IE to recognise new elements in HTML5.

Happy coding. :-)



I'm a web developer with a passion for standards, and a strong belief in quality-over-quantity and using the right tool for the job.