Add style to abbr tags in IE

• Original:http://www.sovavsiti.cz/css/abbr.html
• Translation:junchen
  
• Copyright: Translator Junchen All, reprint please contact the translator.

Brief introduction

<abbr> is used for abbreviations on Web pages (translator Note: here the abbreviation and abbreviation are separated, the short range is larger than the abbreviation, take the initials of the acronym with <acronym> tags) to add the appropriate markup XHTML tags, Windows Internet Explorer temporarily does not support <abbr> tags. In IE, you can apply CSS to <acronym> but can not apply to <abbr> tags, ie will be the <acronym> tag title attribute prompts, but will ignore the <abbr> tag.

This IE bug (or feature) has made some Web site personnel think that <abbr> labels are not used at all, and apparently it is not right. 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 IE ignores <abbr> tags, but other tags embedded in <abbr> tags are normal. So I embedded a <span> tag in <abbr>, set <span> title and class attributes, and then <abbr> started to become the same as the <acronym> label.

code example

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

<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 embed <span> manually for each <abbr> tag--both boring and unnecessary for Mozilla and opera. Fortunately, there is now an automated, client-based scripting solution.

You may have noticed that the shorthand on this page (the original author's page ) will be prompted even in IE, with a CSS style (dashed underline and a question mark mouse cursor). However, if you look at the source code, you will not find the <span> tag 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([^>]*)>([^<]*)<\/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 and, if it is IE, replaces all <abbr> tags for the modified version (embedded <span>). Note that we must use regular expressions and innerHTML attributes to replace the standard Dom method, because IE cannot get <abbr> properties through 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,<abbr> and <acronym> are styled-a question-mark mouse cursor (when the mouse is pointed) and a dashed underline.

Other

1. Thank Michael Kusyn for providing a JavaScript solution.
2. For more information on <abbr>,<acronym> labels and the difference between the two, refer to Craig Saila 's HTML is not a acronym ... (evolt.org)

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