Add style to abbr tags in IE

is used for the short name on the Web page (Translator Note: here the abbreviation and abbreviation are separated, the short range is larger than the abbreviation, take the initials of the abbreviation with the label) to add the appropriate labeled XHTML tags, Windows Internet Explorer does not support the label. In IE, you can apply CSS to but not apply to the label, IE will be the title of the Tag property prompts, but will ignore the label.

This IE bug (or feature) makes some Web site personnel think that the label is not used at all, and apparently it is wrong. This tag is handled correctly in Mozilla and opera, and it is important for the readability and semantics of web content. This is why I have been looking for solutions, and finally I found it.

Solving method

This method is based on a simple fact: even if IE ignores the label, other tags embedded in the label are normal. So I embedded a tag in, set the title and class attributes, and then began to become the same as the label.

code example

Take a look at the following code, an example of a simple acronym:

Css
Now, compare the modified code:

Css
Automatic operation

It is obviously impossible to embed each label manually-boring and unnecessary for Mozilla and opera. Fortunately, there is now an automated, client-based scripting solution.

As you may notice, the abbreviated words on this page are prompted even in IE, with CSS styles (dashed underlines and a question-mark 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 load 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 checks the client browser and, if it is IE, replaces all the tags as modified (embedded). Note that we must use regular expressions and innerHTML attributes to replace the standard Dom method, because IE cannot get properties through the DOM.

Style of

Finally, 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 use acronym and SPAN.ABBR. In any case, the and are styled-a question-mark mouse cursor (when the mouse is pointed) and a dashed underline.