IE6 and the Abbreviation tag

While testing a WordPress theme in various browsers (IE) I noticed a strange issue that was occurring in IE6, but fine in IE7+. After a little head scratching I realised IE6 doesn’t recognise the abbreviation(abbr) tag. I’d never noticed before as I very rarely use the tag.

As a quick fix you could edit your theme:

1
2
3
4
5
6
7

<!-- From -->
<abbr>Abbreviation here</abbr>

<!-- To -->
<abbr>
    <span>Abbreviation here</span>
</abbr>

Then apply any styles to the inner span rather than the abbr. Or if hard coding a span isn’t your thing you could always use a little bit of jQuery(1.2+) goodness to add the spans for you:

1
2
3
4
5

jQuery(function($){
    $("abbr").each(function(){
        $(this).wrapInner('<span></span>');
    });
});

The effect on page render time will be minimal since we are only grabbing a single tag with no complex selectors.