Methode zum Schreiben von bedingten Kommentaren und Beispielcode

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

Als Front-End-Ingenieure müssen wir mit dem IE vertraut sein. Beim Schreiben von Code zur Implementierung eines Designentwurfs treten häufig verschiedene IE-Kompatibilitätsprobleme auf. Es gibt viele Möglichkeiten, mit Kompatibilität umzugehen. Am einfachsten ist es, unterschiedliche Stile für unterschiedliche Browser zu schreiben.
Jeder Browser im Internet Explorer verfügt über einen eigenen Kommentarsatz. Anmerkungen, die zu Ihrem eigenen Browser gehören, werden speziell in Ihrem eigenen Browser erkannt und nicht von seinem Browser. Als Nächstes zeigen wir Ihnen, wie Sie bedingte Stile schreiben.

Es ist ein Kommentar in HTML-Sprache. Es handelt sich um eine dem Code hinzugefügte Notiz, damit Sie oder Ihre Teammitglieder wissen, was Sie geschrieben haben, wann Sie es geschrieben haben usw. Dieser Kommentar wird nicht im Browser angezeigt, aber Sie können diesen Teil sehen, wenn Sie den Quellcode der Seite anzeigen, wie im folgenden einfachen Beispiel:

Code kopieren
Der Code lautet wie folgt:

<!-- HTML-Kommentar hier -->
<div>HTML-Kommentar</div>

Der Inhalt im obigen Code ist der Kommentarteil. Wenn wir dann auf der Grundlage des oben Gesagten eine bedingte Anweisung hinzufügen, können wir den gewünschten bedingten Kommentar erhalten. Der Internet Explorer verfügt über einen eigenen Satz bedingter Kommentare. Bedingte Kommentare bieten viele Vorteile. Der wichtigste besteht darin, dass sie Ihrer Website ein sauberes und erfrischendes Aussehen verleihen, und der zweite darin, dass sie problemlos mit allen geeigneten Browsern kompatibel sind. Diese Vorteile wecken bei uns unmittelbares Interesse an bedingten Kommentaren. Wie sollten also bedingte Kommentare geschrieben werden? Lassen Sie mich unten einen Blick darauf werfen.

So schreiben Sie bedingte Stile <br />Die Methode ist sehr einfach. Wir müssen nur das externe Stylesheet auf die normale Weise importieren und dann bedingte Kommentare außerhalb verschachteln. Bevor wir bedingte Kommentaranweisungen verwenden, müssen wir mehrere bedingte Kommentarattribute verstehen und verwenden:
1. gt (größer als): Wählen Sie Versionen aus, die größer als die bedingte Version sind, ausgenommen die bedingte Version selbst.
2. lt (kleiner als): Dies ist das Gegenteil von gt, was bedeutet, dass die Version unterhalb der bedingten Version ausgewählt wird, wobei die bedingte Version selbst ausgeschlossen wird.
3. gte (größer als oder gleich): Wählen Sie Versionen aus, die größer als die bedingte Version sind und die bedingte Version selbst enthalten.
4. lte (kleiner als oder gleich): Wählen Sie die Version unterhalb der bedingten Version aus, einschließlich der bedingten Version selbst.
5. !: Wählen Sie alle Versionen außer der bedingten Version aus, unabhängig von hoch oder niedrig.

Beispiele für bedingte Stile
1. Unterstützt alle IE-Browser

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE]>
<link rel="stylesheet" href="IE.css" type="text/css"/>
<![endif]-->

2. Unterstützt alle Browser außer IE

Code kopieren
Der Code lautet wie folgt:

<!--[wenn !IE]>
<link rel="stylesheet" href="noIE.css" type="text/css"/>
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[wenn !IE]><!-->
<link rel="stylesheet" href="noIE.css" type="text/css" />
<!--<![endif]-->

3. Unterstützt nur IE10

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 10]>
<link rel="stylesheet" type="text/css" href="IE10.css">
<![endif]-->

4. Unterstützt nur IE9

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 9]>
<link rel="stylesheet" type="text/css" href="IE9.css">
<![endif]-->

5. Unterstützt nur IE8

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 8]>
<link rel="stylesheet" type="text/css" href="IE8.css">
<![endif]-->

6. Unterstützt nur IE7

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 7]>
<link rel="stylesheet" type="text/css" href="IE7.css">
<![endif]-->

7. Unterstützt nur IE6

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css">
<![endif]-->

8. Unterstützt IE10 und niedriger (IE9 und niedriger)

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 10]>
<link rel="stylesheet" type="text/css" href="ie9Down.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[wenn lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9Down.css">
<![endif]-->

9. Unterstützt IE9 und niedrigere Versionen (IE8 und niedrigere Versionen)

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 9]>
<link rel="stylesheet" type="text/css" href="ie8Down.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[wenn lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8Down.css">
<![endif]-->

10. Unterstützt IE8 und darunter (IE7 und darunter)

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 8]>
<link rel="stylesheet" type="text/css" href="ie7Down.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[wenn lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7Down.css">
<![endif]-->

11. Unterstützt IE7 und darunter (IE6 und darunter)

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE 7]>
<link rel="stylesheet" type="text/css" href="ie6Down.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[wenn lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6Down.css">
<![endif]-->

12. Versionen höher als IE9 (IE10 und höher)

Code kopieren
Der Code lautet wie folgt:

<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10Up.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[wenn gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10Up.css">
<![endif]-->

13. Versionen höher als IE8 (IE9 und höher)

Code kopieren
Der Code lautet wie folgt:

<!--[if gt IE 8]>
<link rel="stylesheet" type="text/css" href="ie9Up.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9Up.css">
<![endif]-->

14. Versionen höher als IE7 (IE8 und höher)

Code kopieren
Der Code lautet wie folgt:

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8Up.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8Up.css">
<![endif]-->

15. Versionen höher als IE6 (IE7 und höher)

Code kopieren
Der Code lautet wie folgt:

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7Up.css">
<![endif]-->

oder

Code kopieren
Der Code lautet wie folgt:

<!--[wenn gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7Up.css">
<![endif]-->

16. Verweisen Sie mit bedingten Kommentaren auf JavaScript-Tags

Code kopieren
Der Code lautet wie folgt:

<!--[wenn IE]>
<script type="text/javascript" src="IE.js"></script>
<![endif]-->

Oben wird gezeigt, wie Sie bedingte Kommentarstile erstellen. Sie können je nach Bedarf einen oder mehrere davon verwenden. Bedingte Kommentare richten sich hauptsächlich an IE-Browser, daher nennen wir sie auch IE-bedingte Kommentare. Auf diese Weise bietet die Verwaltung separater Stile, die für die IE-Kompatibilität geschrieben wurden, großen Komfort und viele Vorteile. Mit bedingten Kommentaren können wir einfach bedingte Stile schreiben und Probleme in Browsern lösen. Dies ist das Ende der Einführung in bedingte Kommentare.

<<:  Allgemeine Tags in XHTML

>>:  MySQL-Beispiel zur Erläuterung von Einzelzeilenfunktionen und Zeichenmathematik, Datumsprozesssteuerung

Artikel empfehlen

MySQL-Batch entfernt Leerzeichen in einem bestimmten Feld

Gibt es in MySQL eine Möglichkeit, Leerzeichen st...

Semantik, Schreiben und bewährte Methoden für Link A

Die Semantik, der Schreibstil und die Best Practi...

Verwendung und Szenarioanalyse des npx-Befehls in Node.js

Tutorial zur Verwendung von NPX Heute Abend, als ...

Bedingte Kommentare zur Bestimmung des Browsers (IE-Reihe)

<!--[if IE 6]> Nur IE6 kann erkennen <![e...

Detaillierte Erklärung gängiger Docker-Befehle

1. Hilfe-Befehl 1. Aktuelle Docker-Version anzeig...

Zusammenfassung der drei Möglichkeiten zum Erstellen neuer Elemente

Erstens: über Text/HTML var txt1="<h1>...

Einführung in das Methodenattribut des Formularformulars in HTML

1 Methode ist eine Eigenschaft, die angibt, wie Da...

MySQL-Methode zur Sperrensteuerung für Parallelität

Inhaltsverzeichnis Vorwort 1. Optimistisches Sper...

So verwenden Sie die Debouce-Anti-Shake-Funktion in Vue

Inhaltsverzeichnis 1. Anti-Shake-Funktion 2. Verw...

So installieren und verwenden Sie Cockpit unter CentOS 8/RHEL 8

Cockpit ist ein webbasiertes Serververwaltungstoo...

Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses

Hintergrund <br />Studenten, die am Front-En...

So ermitteln Sie die Größe eines Linux-Systemverzeichnisses mit dem Befehl du

Jeder, der das Linux-System verwendet hat, sollte...

Spielen Sie mit der Connect-Funktion mit Timeout in Linux

Im vorherigen Artikel haben wir mit Timeouts unte...

Docker-Image erstellen Dockerfile und Commit-Operationen

Erstellen des Images Es gibt zwei Hauptmethoden z...

Beispielcode für die Django+MySQL-Konfiguration und einfache Bedienung der Datenbank

Schritt 1: Laden Sie den MySQL-Treiber herunter c...