Add style to abbr tags in IE _css/html

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

Copyright: Translator Junchen All, reproduced please contact the translator.
Brief introduction

is used for abbreviations on the Web page (the Translator Note: here to separate abbreviations and abbreviations, referred to as the scope than the abbreviation, the initials abbreviated with the label) to add the appropriate annotated XHTML label, Windows Internet Explorer does not support the label. In IE, you can apply CSS to but not to the tag, IE will display a hint for the title property of the tag, but will ignore the tag.

This IE bug (or feature) makes some Web site personnel think that the label is useless, and obviously it is wrong. This tag has been handled correctly in Mozilla and opera, and it is important for readability and semantics of web content. That's why I've been looking for solutions, and I finally found them.

Workaround

This method is based on a simple fact: even though IE ignores tags, other tags nested inside the tag are normal. So I'm embedding a tag in, set the title and class properties, and then start to become the same as the label.

Code examples

Take a look at the following code, which is an example of a simple abbreviation:

Css
Now, compare the modified code:

CSS
Automatic operation

Manually giving each label a chance to embed is obviously impossible-boring and unnecessary for Mozilla and opera. Fortunately, there is now an automatic, client-side scripting-based workaround.

You may have noticed that the shorthand words on this page (the original author's page), even in IE, are prompted with a CSS style (a dashed underline and a question mark-like mouse cursor). However, if you look at the source code, you will not find the label mentioned above . This is thanks to a simple JavaScript loaded on this page:

function Styleabbr () {
var oldbodytext, Newbodytext, Reg
if (Isie) {
Oldbodytext = Document.body.innerHTML;
reg =/]*) > ([^<]*) <\/ABBR>/g;
Newbodytext = Oldbodytext.replace (Reg, '$ $ ');
Document.body.innerHTML = Newbodytext;
}
}
Window.onload = function () {
STYLEABBR ()
};

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

This script will check the client browser and, if it is IE, replace all tags with the modified version (embedded ). Note that we have to use regular expressions and the innerHTML property to replace the standard Dom method, because IE cannot get properties through the DOM.

Styling

Finally, take a look at the CSS used on this page. Quite simple:

ABBR, acronym, SPAN.ABBR {
Cursor:help;
border-bottom:1px dashed #000;
}
Mozilla and Opera use the ABBR and acronym attribute selectors, IE uses acronym and SPAN.ABBR. In any case, and both are styled-a question mark-like mouse cursor (when the mouse is pointing up) and a dashed underline.

Other

1. Thank Michael Kusyn for the JavaScript solution.
2. For more information about, the label and the difference between the two, refer to Craig Saila's HTML is isn't an acronym ... (evolt.org)

Welcome to Exchange comments, you can send e-mail to marek@sovavsiti.cz.

