Styling Abbr Tag in IE – JavaScript Fix

Internet Explorer for Windows does not support the <abbr> tag. This makes it hard to style in CSS.

Marek Prokop posted a fix for this in the post Styling <abbr> in IE which has been very helpful. However, it seems to prevent JavaScript functioning properly.

It works by grabbing the body HTML, replaces all <abbr> tags, and then sets the body text to this new HTML. Although this should be fine, on our particular site, it prevents all the JavaScript working.

I have created a small workaround. It does require JQuery to work. Instead of replacing the whole body, it finds each <abbr>, finds the parent node, then replaces the HTML in that node.

All our JavaScript works now.

function styleAbbr()
{
  if (isIE)
  {
    var reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
    $("abbr").each(function()
    {
      local_html = $(this).parent().html();
      $(this).parent().html(local_html.replace(reg, '<span class="abbr">$2</span>'));
    });
  }
}
 
window.onload = function(){
  styleAbbr()
};
 
isIE = (document.all) ? true:false;

As a note, there is no way to manipulate the <abbr> tags using DOM – IE6 will not recognise it as a valid DOM Element. I took a long time trying to rewrite the fix using DOM, and even though some DOM functions worked, the key ones to manipulate the <abbr> tag didn’t. The fix I have presented here isn’t very elegant, but it does work for us.