Fügen Sie Stile zum Abbr-Tag im IE hinzu

Autor：Eve Cole Aktualisierungszeit：2009-05-31 00:31:34

Einführung

<abbr> wird verwendet, um der Abkürzung auf der Webseite entsprechend gekennzeichnete XHTML-Tags hinzuzufügen (Anmerkung des Übersetzers: Hier werden Abkürzung und Abkürzung getrennt betrachtet, der Abkürzungsbereich ist größer als die Abkürzung, verwenden Sie das Tag <acronym> für den Anfangsbuchstaben). Abkürzung), IE-Browser für Windows unterstützt derzeit das <abbr>-Tag nicht. Im IE können Sie CSS auf das <acronym>-Tag anwenden, nicht jedoch auf das <abbr>-Tag. IE zeigt eine Eingabeaufforderung für das Titelattribut des <acronym>-Tags an, ignoriert jedoch das <abbr>-Tag.

Dieser IE-Fehler (oder diese Funktion) hat einige Website-Benutzer zu der Annahme veranlasst, dass das <abbr>-Tag überhaupt nutzlos sei, und das ist offensichtlich falsch. Dieses Tag wird in Mozilla und Opera immer noch korrekt behandelt und ist für die Lesbarkeit und Semantik von Webinhalten sehr wichtig. Deshalb habe ich immer wieder nach einer Lösung gesucht und sie schließlich gefunden.

Lösung

Diese Methode basiert auf einer einfachen Tatsache: Auch wenn der IE das <abbr>-Tag ignoriert, sind andere im <abbr>-Tag verschachtelte Tags immer noch normal. Also habe ich ein -Tag in <abbr> eingebettet, die Titel- und Klassenattribute von festgelegt und dann wurde <abbr> mit dem <acronym>-Tag identisch.

Codebeispiel

Schauen Sie sich den folgenden Code an, ein einfaches Beispiel für Abkürzungen:

Vergleichen Sie nun den geänderten Code:

automatischer Betrieb

Das manuelle Einbetten von in jedes <abbr>-Tag ist offensichtlich unmöglich – sowohl langweilig als auch unnötig für Mozilla und Opera. Glücklicherweise gibt es jetzt eine automatisierte, clientseitige, skriptbasierte Problemumgehung.

Sie haben vielleicht bemerkt, dass die abgekürzten Wörter auf dieser Seite (Anmerkung des Übersetzers: die Seite des ursprünglichen Autors) sogar im IE abgefragt werden und CSS-Stile (gepunktete Unterstreichung und ein fragezeichenförmiger Mauszeiger) hinzugefügt werden. Wenn Sie sich jedoch den Quellcode ansehen, werden Sie das oben erwähnte -Tag nicht finden. Dies wird durch ein einfaches JavaScript erreicht, das diese Seite lädt:

Funktion styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1>$2</ABBR>');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};

isIE = (document.all) ? true:false;

Dieses Skript überprüft den Client-Browser und ersetzt, wenn es sich um den IE handelt, alle <abbr>-Tags durch geänderte Versionen (eingebetteter ). Beachten Sie, dass wir anstelle der Standard-DOM-Methode reguläre Ausdrücke und innerHTML-Attribute verwenden müssen, da der IE das <abbr>-Attribut nicht über das DOM erhalten kann.

Styling

Ein letzter Blick auf das auf dieser Seite verwendete CSS. Ganz einfach:

Abbr, Akronym, span.abbr {
Cursor: Hilfe;
border-bottom: 1px gestrichelt #000;
}

Mozilla und Opera verwenden die Attributselektoren abbr und acronym, und IE verwendet acronym und span.abbr. Unabhängig davon sind sowohl <abbr> als auch <acronym> formatiert – mit einem Fragezeichen-Mauszeiger (wenn sich die Maus darüber befindet) und einer gestrichelten Unterstreichung.