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): 3b91107ae0f6dc60cbcc0243262d767fVom IE-Browser angezeigter Inhaltfccabc11cfc882051ea1460ae5d5e834, für IE6 und niedriger: 77ff45aa02bda806843bc31600e44271Inhalt wird nur in IE6 angezeigt-1b771f47d72d900ba74308aee59557f0. 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
3b91107ae0f6dc60cbcc0243262d767f
Dieser Text wird nur im IE-Browser angezeigt
32e58b5d176aa7c802edc3635d7b0000 ;

Nur ​​gültig in IE6
32bf6dd8d9e9c69afb95af0b0e5e6991
Dieser Text wird nur im IE6-Browser angezeigt
60453962d656d01b50acc4a3185457fa

Nur ​​gültig in IE6 und höher
91029187a47d4c3a99cc198a5627b173
Dieser Text wird nur in IE-Browsern von IE6 und höher angezeigt (einschließlich)
< ;![endif]-->

Funktioniert nicht auf IE8
266c419352a525843049eb7155ebf872 IE8 Der Browser zeigt
1b771f47d72d900ba74308aee59557f0

Wirksam in Nicht-IE-Browsern
dbf5feeb0d676154b00e7fac3915442f Funktioniert in Nicht-IE-Browsern. Der IE-Browser zeigt
CSS-Hack-Methode zwei: klasseninterne Attributpräfixmethode

Die Die Attributpräfixmethode befindet sich im CSS-Stil des Attributs. Fügen Sie vor dem Namen einige Hack-Präfixe hinzu, die nur von bestimmten Browsern erkannt werden können, um den erwarteten Seitenanzeigeeffekt zu erzielen.

CSS-Hack-Vergleichstabelle für jede IE-Version

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y