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. :-)

3 Responses to Fixing <abbr> in IE with one line of JavaScript

  1. 549 Steven 2008-03-03 17:48:21

    IE8 is already announced? Is it good? No, I mean, will it suck comparatively less?

  2. 1469 Jordan Clark 2008-04-08 15:17:08

    Nice one, Paul! Until now, I've been using this technique, which inserts a SPAN with a class of abbr inside each occurrence of the ABBR element.

    One thing I've noticed, however, is that the CSS property border-bottom is completely ignored in IE6 (and maybe other versions, I haven't checked). Funnily enough, only bottom borders are affected; top, left and right borders work perfectly. All other CSS properties seem to work, too. I have posted an example of this on my website, see:

    This is a classic case of Murphy's Law; border-bottom is probably the most popular style applied by designers to highlight ABBR and ACRONYM tool-tips to users.

  3. 1916 Jordan Clark 2008-04-15 22:12:04

    Please ignore that bit in my last comment about the border-bottom "problem". As turns out, I had a rule higher up in the cascade that was causing the problem... silly me! ;)


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.