Add style to abbr tags in IE

Source: Internet
Author: User
Tags add client
    • 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.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.