Ajouter style_CSS/HTML à la balise abbr dans IE

Auteur : JunChen 2005-5-24 9:56:57
Texte original : http://www.sovavsiti.cz/css/abbr.html
Traduction : JunChen

Copyright : Traducteur JunChen Veuillez contacter le traducteur pour la réimpression.
Présentation

est utilisé pour ajouter des abréviations appropriées sur les pages Web (Note du traducteur : ici, les abréviations et les abréviations sont considérées séparément. La portée des abréviations est plus large que celle des abréviations. Utilisez la balise pour la première lettre de l'abréviation). Balises XHTML marquées, le navigateur Windows IE ne prend actuellement pas en charge la balise Dans IE, vous pouvez appliquer CSS à la balise mais pas à la balise . IE affichera une indication pour l'attribut title de la balise

Ce bug (ou fonctionnalité) d'IE fait penser à certains membres du personnel du site Web que la balise est inutile du tout, et c'est évidemment faux. Cette balise est toujours gérée correctement dans Mozilla et Opera, et elle est très importante pour la lisibilité et la sémantique du contenu Web. C'est pourquoi j'ai continué à chercher une solution, et finalement je l'ai trouvée.

Solution

Cette méthode est basée sur un fait simple : même si IE ignore la balise , les autres balises imbriquées dans la balise J'ai donc intégré une balise dans , défini les attributs de titre et de classe de , puis

Exemple de code

Regardez le code ci-dessous, qui est un exemple simple d'abréviation :

CSS
Maintenant, comparez le code modifié :

CSS
Actions automatiques

Intégrer manuellement dans chaque balise est évidemment impossible - à la fois ennuyeux et inutile pour Mozilla et Opera. Heureusement, il existe désormais une solution de contournement automatisée basée sur un script côté client.

Vous avez peut-être remarqué que les mots abrégés sur cette page (Note du traducteur : la page de l'auteur original) sont affichés même dans IE, et que des styles CSS sont ajoutés (soulignement en pointillé et curseur de souris en forme de point d'interrogation). Cependant, si vous regardez le code source, vous ne trouverez pas la balise C'est grâce à un simple JavaScript qui charge cette 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;

Ce script vérifiera le navigateur client, et s'il s'agit d'IE, remplacera toutes les balises par la version modifiée (intégrée ). Notez que nous devons utiliser des expressions régulières et des attributs innerHTML au lieu de la méthode DOM standard, car IE ne peut pas obtenir l'attribut

Stylisé

Jetez enfin un œil au CSS utilisé sur cette page. Assez simple :

abbr, acronyme, span.abbr {
curseur : aide ;
border-bottom : 1px dashed #000 ;
}
Mozilla et Opera utilisent des sélecteurs d'attributs abbr et acronyme, IE utilise Utiliser acronyme et span.abbr. Quoi qu'il en soit, et sont stylisés - avec un point d'interrogation du curseur de la souris (lorsque la souris est survolée) et un soulignement en pointillés.

Autres

1. Merci à Michael Kusyn pour avoir fourni une solution JavaScript.
2. Pour plus d'informations sur les balises , et la différence entre les deux, reportez-vous à HTML n'est pas un acronyme de Craig Saila... (Evolt.org)

Bienvenue pour échanger des opinions et des commentaires, vous pouvez envoyer un e-mail à marek@sovavsiti.cz.