How-to make the ABBR element work in IE lt 7
When authors use ACRONYM instead of ABBR or wrap every single ABBR inside a SPAN it is not necessarily because they do not know better, but more probably because Internet Explorer (lt 7) does not handle this element properly (obscure Internet Explorer bug).
In a 2006 article, Russ Weakley said:
Internet Explorer 5 and 6 for Windows do not support the <abbr> element. This leaves developers with a range of choices:
- Incorrectly use the <acronym> element instead of the <abbr> element
- Add a <span> element inside the <abbr> element and applying the same styles to this span
- Use JavaScript to solve the problem
- Use the abbr-cadabra method
This article is about a new option that:
- preserves semantics
- does not rely on a structural hack
- validates.
Update: I just found out that this is not that new. Jon Gibbins wrote JavaScript, abbr and Internet Explorer two weeks ago and Jeremy Keith wrote ABBRacadabra almost two months before that.
The problem
Examples of acronyms and abbreviations:
- Acronyms (
acronym) - NASA
- GIF
- Abbreviations (
abbr) - W3C
- WWW
As the above examples show, hovering over the ABBRs in Internet Explorer (lt 7) does not reveal the expansion of the abbreviation in a tooltip. Also, the browser fails to change the cursor shape and does not create a bottom border for these elements; in fact, it ignores the following rule altogether:
abbr {
cursor: help;
border-bottom:thin dotted black;
}
The main problem is that IE breaks the ABBR. The button below shows how many nodes the browser finds in the parent of the "WWW" ABBR.
The fix
The simple statement below (for IE lt 7 only) is all we need for the magic to happen. This prevents IE from creating an extra node, helping it treat the ABBR element as it should.
<!--[if lt IE 7]>
<script type="text/javascript">document.createElement('abbr');</script>
<![endif]-->
Click on the button below to insert the above snippet into this document to see how Internet Explorer then treats the examples on this page.
Further reading
- How to style unknown elements in IE
- JavaScript, abbr and Internet Explorer
- ABBRacadabra
- obscure Internet Explorer bug
- Add a <span> element inside the <abbr> element and applying the same styles to this span
- Use JavaScript to solve the problem
- Use the abbr-cadabra method
