Internet Explorer 6 doesn't support the abbr element, so we're forced to use JavaScript to enable this element in IE 6. Fortunately, jQuery makes this task really easy. All we have to do is to wrap the content of this element with a span element having the same title attribute and a CSS class with some styles attached to it. Since the $.browser() jQuery feature is currently deprecated, we'll use conditional comments to give our code to IE 6. First, a couple of CSS styles:
abbr, span.abbr {
border-bottom: 1px dashed;
cursor: help;
font-weight: bold;
text-transform: uppercase;
font-variant: small-caps;
}
Now our jQuery code inside conditional comments:
<!--[if lte IE 6]>
<script type="text/javascript">
$(document).ready(function() {
$('abbr').each(function() {
var $abbr = $(this);
var title = $abbr.attr('title');
var span = '<span class="abbr"
title="' + title + '"></span>';
$abbr.wrapInner(span);
});
});
</script>
<![endif]-->
As you can see, we use the wrapInner() jQuery method to wrap the content of the abbr element with a newly created span element. You can see the demo below.