Wenn es um den Mechanismus zur CSS-Verarbeitung geht, gibt es im IE immer viele Dinge, die Leute zum Bluterbrechen bringen, aber sie sind immer noch mit ihren aktuellen Verbesserungen zufrieden.
Nehmen Sie als Beispiel die Unterstützung für pseudo-class:hover. IE7+ hat endlich Unterstützung für andere Tags als a hinzugefügt. Natürlich sollten wir solche Verbesserungen begrüßen, aber unter IE6 ist die Unterstützung von :hover für a nicht so zufriedenstellend. Das folgende Problem möchte ich kurz ansprechen: Hover in IE6 und früheren Browsern.
Viele Leute kennen möglicherweise bereits einige Probleme mit :hover in IE6 und früheren Browsern (im Folgenden als IE6- bezeichnet). Ich möchte hauptsächlich über Themen wie a:hover span{} sprechen.
Um einige einfache dynamische Effekte hinzuzufügen, verwenden wir oft :hover, um beispielsweise die Farbe des Textes zu ändern, wenn die Maus über einen Link fährt. wie:
Ja, das funktioniert in allen Browsern. Aber wenn Sie es so ändern:
Sie werden feststellen, dass unter IE6 nichts passiert – unsere Stile sind ungültig. Ja, das ist es. Viele Menschen hätten auf dieses Problem stoßen und es lösen sollen.
Ja, Sie müssen nur einen weiteren a:hover{}-Stil hinzufügen, um dieses Problem zu lösen, der Zoom, Abstand, Rand und andere Attribute enthalten kann. wie folgt:
Als ich sah, dass der normale Effekt wiederhergestellt war, dachte ich darüber nach, was den :hover-Fehler verursacht haben könnte. Sie können dazu Zoom, Anzeige, Auffüllung und andere Attribute verwenden, daher dachte ich, dass es am Haslayout liegen könnte. Nun, das ist wahrscheinlich der Fall. Wenn Sie jedoch weiter testen, werden Sie feststellen, dass Sie dies können, unabhängig davon, welche Attribute Sie in a:hover{} schreiben, z. B. Farbe, Schriftgröße, Überlauf (sogar nicht vorhandene Attribute, z. B. xx:yyy). Stellen Sie es wieder normal her.
Fühlen Sie sich ein wenig verblüfft, nachdem Sie es hier getestet haben? Ja, mir geht es auch so. Was den Grund angeht, weiß ich noch nicht, vielleicht weiß es jemand.
a:hover{zoom:1;}
a:hover em{color:#F00;}
<a href="?">Ändere meine <em>Farbe</em></a> bei Mouseover
a:hover em{color:#F00;}
<a href="?">Ändere meine <em>Farbe</em></a> bei Mouseover
a:hover{color:#F00;}
<a href="?">Meine Farbe bei Mouseover ändern</a>