Introduction
<abbr> is used to add appropriately labeled XHTML tags to the abbreviation on the web page (Translator's Note: Here, the abbreviation and abbreviation are considered separately, the abbreviation range is larger than the abbreviation, use the <acronym> tag for the initial abbreviation), IE browser for Windows does not currently support the <abbr> tag. In IE, you can apply CSS to the <acronym> but not to the <abbr> tag. IE will display a prompt for the title attribute of the <acronym> tag, but ignore the <abbr> tag.
This IE bug (or feature) has caused some website people to think that the <abbr> tag is useless at all, and this is obviously wrong. This tag is still handled correctly in Mozilla and Opera, and it is very important for the readability and semantics of web content. That's why I kept looking for a solution, and finally I found it.
Solution
This method is based on a simple fact: even if IE ignores the <abbr> tag, other tags nested within the <abbr> tag are still normal. So I embedded a <span> tag inside <abbr>, set the title and class attributes of <span>, and then <abbr> began to become the same as the <acronym> tag.
code example
Take a look at the code below, a simple example of abbreviations:
<abbr title="Cascading Style Sheets">CSS</abbr>
Now, compare the modified code:
<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>
automatic operation
Manually embedding <span> into every <abbr> tag is obviously impossible - both boring and unnecessary for Mozilla and Opera. Fortunately, there is now an automated, client-side script-based workaround.
You may have noticed that the abbreviated words on this page (Translator's Note: the original author's page) are prompted even in IE, and CSS styles (dotted underline and a question mark-shaped mouse cursor) are added. However, if you look at the source code, you will not find the <span> tag mentioned above. This is achieved thanks to a simple JavaScript that loads this page:
This script will check the client browser and, if it is IE, replace all <abbr> tags with modified versions (embedded <span>). Note that we must use regular expressions and innerHTML attributes instead of the standard DOM method, because IE cannot obtain the <abbr> attribute through the DOM.
Styling
One last look at the CSS used on this page. Pretty simple:
abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}
Mozilla and Opera use abbr and acronym attribute selectors, and IE uses acronym and span.abbr. Regardless, both <abbr> and <acronym> are styled - with a question mark mouse cursor (when the mouse is over) and a dashed underline.