CSS-Hacks \9 und \0 funktionieren möglicherweise nicht zum Hacken von IE11\IE9\IE8

$CSS-Hacks \9 und \0 funktionieren möglicherweise nicht zum Hacken von IE11\IE9\IE8$

Jedes Mal, wenn ich eine Webseite oder ein Formular gestalte, mache ich mir Sorgen über die Kompatibilitätsprobleme verschiedener Browser, insbesondere der IE-Familie. Beim Entwurf auf Kompatibilität achten wir häufig auf die Verwendung einer einzigartigen Syntax, die von verschiedenen Browsern erkannt und gehackt werden kann, um eine normale Anzeige in verschiedenen Browsern zu erreichen. Unter ihnen sind \9 und \0 die, die wir am häufigsten verwenden. \9 und \0 sind eindeutige Bezeichner zum Hacken von IE8, IE9 und IE11. Aber die Frage ist: Wie hacken \9 und \0 IE8, IE9 und IE11? Dieses Problem beschäftigt mich schon seit langem. Heute habe ich es jedoch endlich herausgefunden und einen Code-Schreibmodus erstellt, mit dem IE8, IE9 und IE11 gehackt werden können. In diesem Artikel erfahren Sie mehr darüber.

Warum sind die möglichen Hacks \9 und \0 für IE11\IE9\IE8 ungültig?

Vielen Leuten ist vielleicht klar, dass \0 zum Hacken von IE8, IE9 und IE11 verwendet wird, während \9 zum Hacken von IE9 verwendet wird. Aber manchmal funktioniert es nicht, wenn Sie es tatsächlich anwenden. Sehen Sie sich den folgenden HTML-Code an:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe: #0000FF\0; /* blau*/
          Hintergrundfarbe:#FFFF00\9; /* gelb */
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE8, IE9, IE11 werden alle gelb angezeigt</div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack1.html

Im obigen Beispiel können \9 und \0 nicht dazu beitragen, verschiedene IE-Browserversionen zu hacken. Was aber passiert, wenn wir die Zeilen /* blue */ und /* yellow */? vertauschen? Bitte sehen Sie sich den HTML-Code an:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe:#FFFF00\9; /* gelb */
          Hintergrundfarbe: #0000FF\0; /* blau*/
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE11 zeigt gelb an, IE8 und IE9 zeigen beide blau an</div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack2.html

Das Ergebnis ist, dass IE11 Gelb anzeigt, während IE8 und IE9 beide Blau anzeigen.

Die beiden obigen Beispiele zeigen, dass IE8 und IE9 beide die Bezeichner \9 und \0 lesen können, und der später geschriebene Bezeichner hat Vorrang, während IE11 nur den Bezeichner \9 lesen kann.

Können wir an diesem Punkt auf der Grundlage der obigen Schlussfolgerungen Code schreiben, um IE8, IE9 und IE11 zu hacken? Offensichtlich nicht, zumindest können Sie IE8 und IE9 nicht hacken, Sie können nur IE11 hacken.

So hacken Sie IE8 und IE9
Also, wie hacken wir IE8 und IE9? Dies ist der Kern des Problems.

In diesem Artikel wird CSS zwischen dem Chrome- und Firefox-Code von IE8/IE9/IE10/IE11 unterschieden. Es wird erwähnt, dass Browser wie IE9 diesen Code verstehen können:

/* IE9+ */
@media alle und (min-width:0) {
    .divInhalt{
        Hintergrundfarbe:#eee;
    }
}

Wenn wir diesen Code mit dem vorherigen Code kombinieren, können wir dann IE8 und IE11 hacken? Der vollständige HTML-Code lautet wie folgt:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe:#FFFF00\9; /* gelb */
          Hintergrundfarbe: #0000FF\0; /* blau*/
    }
    /* IE9+ */
    @media alle und (min-width:0) {
        .Inhalt{
            Hintergrundfarbe: #000; /* schwarz */
        }
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE11 zeigt Gelb an, IE8 zeigt Blau an und IE9 zeigt Schwarz an. </div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack3.html

An diesem Punkt wurden die Kompatibilitätsprobleme von IE8, IE9 und IE11 gelöst.

Ich habe jedoch noch nicht damit herumgespielt, da @media all und (min-width:0) auch in Chrome, Firefox, 360 und anderen Browsern wirksam sind. Daher muss der obige Code leicht geändert werden. Die CSS-Anweisung in @media all und (min-width:0) {} fügt auch die Markierung \0 hinzu, um anzuzeigen, dass dies der Stil von IE9 ist. Der vollständig geänderte Code lautet wie folgt:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe:#FFFF00\9; /* gelb */
          Hintergrundfarbe: #0000FF\0; /* blau*/
    }
    /* IE9+ */
    @media alle und (min-width:0) {
        .Inhalt{
            Hintergrundfarbe: #000\0; /* schwarz */
        }
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE11 zeigt Gelb an, IE8 zeigt Blau an und IE9 zeigt Schwarz an. </div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack4.html

An diesem Punkt sind die Kompatibilitätsprobleme von IE8, IE9 und IE11 perfekt gelöst.

Nach dem Meta-Deklarationsattribut IE=Edeg lautet der kompatible Code für IE8\IE9\IE11. Wenn jedoch das Meta-Element IE=Edge im HTML-Code der Webseite deklariert ist, ist der obige Code falsch.

Schauen wir uns den ersten HTML-Code an:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="X-UA-kompatibel" content="IE=Edge" /> 
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe: #0000FF\0; /* blau*/
          Hintergrundfarbe:#FFFF00\9; /* gelb */
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE11 zeigt blau an, IE8 und IE9 zeigen beide gelb an</div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack5.html

Das Ergebnis ist, dass IE11 Blau anzeigt, IE8 und IE9 beide Gelb anzeigen, aber nicht alle drei Browser Gelb anzeigen.

Dies bedeutet, dass IE11 nach dem Hinzufügen der Meta-Anweisung IE=Edge das \9-Tag nicht mehr lesen kann.

Schauen wir uns den folgenden Code an:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="X-UA-kompatibel" content="IE=Edge" /> 
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe:#FFFF00\9; /* gelb */
          Hintergrundfarbe: #0000FF\0; /* blau*/
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE8, IE9, IE11 werden alle blau angezeigt</div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack6.html

Das Ergebnis ist, dass IE8, IE9 und IE11 alle blau angezeigt werden, was zeigt, dass IE8, IE9 und IE11 alle das Symbol \0 verstehen können.

Durch Kombination der beiden obigen Beispiele können wir zu dem Schluss kommen, dass IE8 und IE9 nach dem Hinzufügen des Metaattributs IE=Edge sowohl die Kennungen \9 als auch \0 lesen können, während IE11 nur die Kennung \0 lesen kann.

Daher können wir IE11 auf dieser Grundlage hacken. Der folgende HTML-Code erklärt:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="X-UA-kompatibel" content="IE=Edge" /> 
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe: #0000FF\0; /* Das Blaue ist für IE11*/
          Hintergrundfarbe: #FFFF00\9; /* Gelb ist für IE8 und IE9*/
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE11 zeigt blau an, IE8 und IE9 zeigen beide gelb an</div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack7.html

Auf diese Weise können wir den obigen Code verwenden, um IE8 und IE9 zu hacken.

Wie hackt man IE8 und IE9? Noch der Keycode des vorherigen Hacks IE8 IE9:

@media alle und (min-width:0) {}

Der vollständige HTML-Code lautet wie folgt:

<!DOCTYPE html>
<Kopf>
    <meta http-equiv="X-UA-kompatibel" content="IE=Edge" /> 
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
    <title>IE8/IE9/IE11 hacken_css beispiel_webkaka.com</title>
    <style type="text/css">
    .Inhalt{
          Breite: 400px; Höhe: 50px; Farbe: #ccc;
          Hintergrundfarbe: #FF0000; /* rot */ 
          Hintergrundfarbe: #0000FF\0; /* Das Blaue ist für IE11*/
          Hintergrundfarbe: #FFFF00\9; /* Gelb ist für IE8 und IE9*/
    }
    /* IE9+ */
    @media alle und (min-width:0) {
        .Inhalt{
            Hintergrundfarbe: #000\9; /* Schwarz ist für IE9*/
        }
    }
    </Stil>
</Kopf>
<Text>
     <div class="content">IE11 zeigt blau, IE8 zeigt gelb und IE9 zeigt schwarz</div>
</body>
</html>

Testadresse: http://demo.jb51.net/html/ie-hack/ie-hack8.html

Achten Sie besonders auf \9 in @media all und (min-width:0) {}, um anzuzeigen, dass es für IE9 ist. Andernfalls können Chrome, Firefox, 360 und andere Browser es lesen. In diesem Beispiel kann es auch IE11 mit dem in meta deklarierten Attribut IE=Edge lesen.

Abschluss

Dieser Artikel bietet eine perfekte Lösung für das Problem, wie man IE8, IE9, IE11 hackt. Es gibt zwei Punkte, die verstanden werden müssen: ob das IE=Edge-Attribut in Meta deklariert ist. Dies macht einen großen Unterschied bei der Art und Weise, wie der Hack-Code geschrieben wird. Die Verwendung von \9 und \0 ist ebenfalls sehr clever.

<<: Detaillierte Erklärung der Vue-Komponenten

>>: Regeln für die Verwendung gemeinsamer MySQL-Indizes

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

Artikel

Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)

CSS-Hacks \9 und \0 funktionieren möglicherweise nicht zum Hacken von IE11\IE9\IE8

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)

MySQL-Startfehler beheben: FEHLER 2003 (HY000): Keine Verbindung zum MySQL-Server auf „localhost“ möglich (10061)

Fügen Sie eine schwebende Eingabeaufforderung für das Kopfzeilensymbol in der ElementUI-Tabelle hinzu

Beispiel für den Export und Import von Docker-Containern

Schritte zum Kapseln der Karussellkomponente in vue3.0

So dockerisieren Sie eine Python-Django-Anwendung

Detaillierte Erläuterung des MLSQL-Beispiels zur Berechtigungssteuerung zur Kompilierungszeit

Verarbeitungsideen zum Entschlüsseln von WeChat-Applet-Paketen auf dem PC in node.js

MySQL-FAQ-Serie: So vermeiden Sie eine plötzliche Vergrößerung der ibdata1-Datei

Artikel empfehlen

Details zur Ereignisbindung reagieren

Aktivieren Sie Remote-Zugriffsrechte für MySQL unter Linux und öffnen Sie Port 3306 in der Firewall

NestJs verwendet Mongoose zum Betrieb von MongoDB

Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM

Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus

Einführung in gängige MySQL-Speicher-Engines sowie Parametereinstellung und -optimierung

Eine umfassende Zusammenfassung häufig verwendeter Anweisungen in MySQL (unbedingt lesen)

Details und Beispielcode der MySQL-Replikationstabelle

Detailliertes Tutorial zum Kompilieren und Installieren von MySQL 5.7.24 auf CentOS7

Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format

So starten Sie ein Java-Programm im Docker

Mehrere häufig verwendete Single-Page-Anwendungswebsite-Sharing

Interpretation von syslogd- und syslog.conf-Dateien unter Linux

Vue implementiert die Seiten-Caching-Funktion

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04