Fügen Sie style_CSS/HTML zum abbr-Tag im IE hinzu

Autor: JunChen 24.5.2005 9:56:57
Originaltext: http://www.sovavsiti.cz/css/abbr.html
Übersetzung: JunChen

Copyright: Übersetzer JunChen. Bitte kontaktieren Sie den Übersetzer für den Nachdruck.
Einführung

wird verwendet, um entsprechende Abkürzungen auf Webseiten hinzuzufügen (Anmerkung des Übersetzers: Hier werden Abkürzungen und Abkürzungen separat betrachtet. Der Umfang von Abkürzungen ist größer als bei Abkürzungen. Verwenden Sie den Tag für den ersten Buchstaben von die Abkürzung). Markierte XHTML-Tags, der Windows IE-Browser unterstützt derzeit nicht das Im IE können Sie CSS auf das -Tag anwenden, aber nicht auf das -Tag.

Dieser IE-Fehler (oder diese Funktion) lässt einige Website-Mitarbeiter denken, dass das -Tag überhaupt nutzlos ist, 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 -Tag ignoriert, sind andere im -Tag verschachtelte Tags immer noch normal. Also habe ich ein -Tag in eingebettet, die Titel- und Klassenattribute von festgelegt und dann wurde mit dem -Tag identisch.

Codebeispiel

Sehen Sie sich den folgenden Code an, der ein einfaches Beispiel für eine Abkürzung ist:

CSSVergleichen Sie nun den geänderten Code:

CSS
Automatische Aktionen

Das manuelle Einbetten von in jedes -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.

Möglicherweise ist Ihnen aufgefallen, dass die abgekürzten Wörter auf dieser Seite (Anmerkung des Übersetzers: die Seite des ursprünglichen Autors) auch im IE angezeigt werden und CSS-Stile hinzugefügt werden (gepunktete Unterstreichung und ein fragezeichenförmiger Mauszeiger). Wenn Sie sich jedoch den Quellcode ansehen, werden Sie das oben erwähnte -Tag nicht finden. Dies ist einem einfachen JavaScript zu verdanken, das diese Seite lädt:

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;

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

Stilisiert

Schauen Sie sich abschließend noch das auf dieser Seite verwendete CSS an. Ganz einfach:

abbr, acronym, span.abbr {
Cursor: Hilfe;
Rand unten: 1 Pixel gestrichelt #000;
}
Mozilla und Opera verwenden Abbr- und Akronym-Attributselektoren, IE verwendet Use Akronym und span.abbr. Unabhängig davon werden sowohl als auch formatiert – mit einem Fragezeichen-Mauszeiger (wenn sich die Maus darüber befindet) und einer gestrichelten Unterstreichung.

Andere

1. Vielen Dank an Michael Kusyn für die Bereitstellung einer JavaScript-Lösung.
2. Weitere Informationen zu , und dem Unterschied zwischen den beiden finden Sie in Craig Sailas HTML is not an acronym... (Evolt.org)

Willkommen zum Austausch von Meinungen und Kommentaren. Sie können eine E-Mail an marek@sovavsiti.cz senden.