Add style_CSS/HTML to abbr tag in IE

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

Copyright: Translator JunChen. Please contact the translator for reprinting.
Introduction

is used to add appropriate abbreviations on web pages (Translator's Note: Here, abbreviations and abbreviations are considered separately. The scope of abbreviations is larger than abbreviations. Use the tag for the first letter of the abbreviation). Marked XHTML tags, Windows IE browser does not currently support the tag. In IE, you can apply CSS to the but not to the tag. IE will display a hint for the title attribute of the tag, but ignore the tag.

This IE bug (or feature) makes some website staff think that the 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 tag, other tags nested in the tag are still normal. So I embedded a tag inside , set the title and class attributes of , and then began to become the same as the tag.

Code example

Look at the code below, which is a simple example of an abbreviation:

CSS
Now, compare the modified code:

CSS
Automatic actions

Manually embedding into every 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 are added (dotted underline and a question mark-shaped mouse cursor). However, if you look at the source code, you will not find the tag mentioned above. This is thanks to a simple JavaScript that loads this page:

function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = / ]*)>([^<]*)/g;
newBodyText = oldBodyText.replace(reg, ' $2');
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, then replace all tags with the modified version (embedded ). Note that we must use regular expressions and innerHTML attributes instead of the standard DOM method, because IE cannot obtain the attribute through the DOM.

Stylized

Finally take a 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, IE uses Use acronym and span.abbr. Regardless, both and are styled - with a question mark mouse cursor (when the mouse is over) and a dashed underline.

Others

1. Thanks to Michael Kusyn for providing a JavaScript solution.
2. For more information about , tags and the difference between the two, refer to Craig Saila's HTML is not an acronym... (Evolt.org)

Welcome to exchange opinions and comments, you can send an email to marek@sovavsiti.cz.