Add a style for the abbr label in IE

Author: JunChen 2005-5-24 9:56:57
Original article: http://www.sovavsiti.cz/css/abbr.html
Translation: JunChen

Copyright: owned by the translator JunChen. For details, contact the translator.
Introduction

<Abbr> is short for the web page. (Note: The Abbreviation and abbreviation are separated here. The abbreviation range is larger than the abbreviation, And the abbreviation is marked with the <acronym> label) the <abbr> label is not supported in Windows IE. In IE, you can apply CSS to <acronym> but not to <abbr> labels. IE will display a prompt for the title attribute of the <acronym> label, however, the <abbr> label is ignored.

This IE bug (or characteristic) makes some website staff think that the <abbr> label is not used at all, but obviously this is wrong. In Mozilla and Opera, the label is correctly processed, and it is very important for the readability and semantics of web content. This is why I have been searching for a solution and finally I found it.

Solution

This method is based on the simple fact that even if IE ignores the <abbr> label, the labels nested in the <abbr> label are still normal. Therefore, I embedded a <span> label in <abbr>, set the title and class attributes of <span>, and then <abbr> began to become the same as the <acronym> label.

Code example

Let's look at the following code:

<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

It is obviously impossible to manually embed the <abbr> label to each <span> -- it is boring and unnecessary for Mozilla and Opera. Fortunately, there is an automatic, client-based Script solution.

You may have noticed that the shorthand words on this page (Translator's note: Original Author's page) are prompted even in IE, CSS style (Virtual underline and a question mark-like mouse cursor) is added ). However, if you look at the source code, you will not find the <span> tag mentioned above. This is due to a simple JavaScript load on this page:

Function styleAbbr (){
Var oldBodyText, newBodyText, reg
If (isIE ){
OldBodyText = document. body. innerHTML;
Reg =/<ABBR ([^>] *)> ([^ <] *) <\/ABBR>/g;
NewBodyText = oldBodyText. replace (reg, '<ABBR $1> <SPAN class = \ "abbr \" $1> $2 </SPAN> </ABBR> ');
Document. body. innerHTML = newBodyText;
}
}
Window. onload = function (){
StyleAbbr ()
};

IsIE = (document. all )? True: false;

This script checks the client browser. If it is IE, it replaces all the <abbr> labels with the modified version (embedded with <span> ). Note that we must use regular expressions and innerHTML attributes to replace the standard DOM method, because IE cannot get the <abbr> attribute Through DOM.

Styling

Finally, let's take a look at the CSS used on this page. Relatively simple:

Abbr, acronym, span. abbr {
Cursor: help;
Border-bottom: 1px dashed #000;
}
Mozilla and Opera use the abbr and acronym attribute selectors, while IE uses acronym and span. abbr. In any case, both <abbr> and <acronym> are styled-a question mark-like mouse cursor (when the mouse is over) and a dotted underline.

Others

1. Thanks to Michael Kusyn for providing the JavaScript solution.
2. For more information about the differences between the <abbr> and <acronym> labels, see the HTML of Craig Saila is not an acronym... (Evolt.org)

Welcome to exchange comments, can mail to marek@sovavsiti.cz.