Die umfassendste Liste von CSS-Hack-Methoden (kompatibel mit mehreren Browsern)

Um einen einheitlichen Seiteneffekt zu erzielen, müssen Sie bestimmte CSS-Stile für verschiedene Browser oder verschiedene Versionen schreiben. Wir nennen diesen Prozess des Schreibens entsprechenden CSS-Codes für verschiedene Browser/verschiedene Versionen einen CSS-Hack! Nachdem wir viele Jahre am Frontend gearbeitet haben, stoßen wir häufig auf eine inkonsistente Leistung zwischen den Browsern, obwohl wir nicht oft Hacks benötigen. Aus diesem Grund werden wir in einigen Fällen äußerst zurückhaltend sein, diese unfreundliche Methode zu verwenden, um die von allen geforderte Seitenleistung zu erreichen. Ich persönlich empfehle nicht, Hacks zu verwenden. Ein gutes Frontend sollte die Anforderungen möglichst ohne den Einsatz von Hacks realisieren, um eine bessere Benutzererfahrung zu erzielen. Die Realität ist jedoch zu grausam. Die historischen Probleme zwischen Browserherstellern zwingen uns dazu, Kompromisse mit Hackern unter den Zielanforderungen einzugehen, obwohl dies nur ein Einzelfall ist. Basierend auf meiner eigenen Erfahrung und meinem Verständnis habe ich heute mehrere Demos erstellt, um die CSS-Hacks von IE6~IE10 und anderen Standardbrowsern zusammenzufassen. Vielleicht sollte dieser Artikel die derzeit umfassendste Zusammenfassung von Hacks sein.

Was ist CSS-Hack?
Aufgrund von Browsern verschiedener Hersteller oder unterschiedlichen Versionen eines bestimmten Browsers (wie IE6-IE11, Firefox/Safari/Opera/Chrome usw.) , sind die CSS-Unterstützung und das Parsen unterschiedlich, was zu einer inkonsistenten Seitendarstellung in verschiedenen Browserumgebungen führt. Um einen einheitlichen Seiteneffekt zu erzielen, müssen wir derzeit spezifische CSS-Stile für verschiedene Browser oder verschiedene Versionen schreiben. Wir nennen diesen Prozess des Schreibens entsprechenden CSS-Codes für verschiedene Browser/verschiedene Versionen einen CSS-Hack! 🎜>
Prinzip des CSS-Hacks
Aufgrund der unterschiedlichen Unterstützung und Parsing-Ergebnisse verschiedener Browser und Browserversionen für CSS sowie des Einflusses der CSS-Priorität auf die Browser-Anzeigeeffekte können wir je nach Browser unterschiedliche CSS anwenden Browserszenarien.

CSS-Hack-Klassifizierung
CSS-Hack verfügt im Allgemeinen über drei Ausdrucksformen: CSS-Attributpräfixmethode, Selektorpräfixmethode und IE-Bedingungskommentarmethode (d. h. HTML-Header-Referenz, wenn IE) Hack. In tatsächlichen Projekten wird CSS Hack hauptsächlich eingeführt, um die Leistungsunterschiede zwischen verschiedenen Versionen von IE-Browsern zu beheben.
Attributpräfixmethode (d. h. klasseninterner Hack): Beispielsweise kann IE6 den Unterstrich „_“ und den Stern „*“ erkennen, IE7 kann den Stern „*“ erkennen, aber den Unterstrich „_“ nicht, IE6~ IE10 erkennt „9“, Firefox kann die oben genannten drei jedoch nicht erkennen.
Selektor-Präfix-Methode (d. h. Selektor-Hack): Beispielsweise kann IE6 *html .class{} erkennen, IE7 kann *+html .class{} oder *:first-child+html .class{} erkennen.
IE-Methode für bedingte Kommentare (d. h. HTML-Hack für bedingte Kommentare): für alle IE (Hinweis: IE10+ unterstützt keine bedingten Kommentare mehr): , für IE6 und niedriger: . Diese Art von Hack wirkt sich nicht nur auf CSS aus, sondern auf den gesamten in der Urteilsaussage geschriebenen Code.
　
Die Schreibreihenfolge von CSS-Hacks besteht im Allgemeinen darin, CSS mit einem breiten Anwendungsbereich und einer starken Erkennungsfähigkeit im Vordergrund zu definieren.


CSS-Hack-Methode 1: Bedingte Kommentarmethode
Diese Methode ist eine Hack-Methode exklusiv für den IE-Browser und wird offiziell von Microsoft empfohlen. Beispielsweise ist

nur im IE wirksam


Funktioniert nicht auf IE8


Wirksam in Nicht-IE-Browsern