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

Probleme mit der Rancher-Bereitstellung und dem Importieren von K8S-Clustern

Die Rancher-Bereitstellung kann über drei Archite...

In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)

Mit dem obigen Artikel habe ich meine Einführung i...

Lösen Sie das Problem mehrerer Listener, die beim Starten von Tomcat in Idea gemeldet werden

Fehler-Screenshot Ich kann nicht finden, wo die A...

Tastenkombinationsvorgang für SQL Server-Kommentare

Batchkommentare in SQL Server Batch-Annotation St...

Lösen Sie das Problem, dass VMWare nach der Installation des Mac-Systems nicht im Vollbildmodus angezeigt werden kann

System: VMTOOLs-Download: Verknüpfung: https://pa...

Detaillierte Erklärung des Ausführungskontexts und des Aufrufstapels in JavaScript

Inhaltsverzeichnis 1. Was ist der Ausführungskont...

MySQL-Beispiel-Tutorial: Ergebnisse auswählen, um ein Update durchzuführen

1. Einzelne Tabellenabfrage -> Update UPDATE T...

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Kombinationsselektoren spielen

CSS-Kombinationsselektoren umfassen verschiedene ...

So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)

Inhaltsverzeichnis einführen Unterstützt Intel-CP...

Werbefähigkeiten im Baidu Union-Umfeld (grafisches Tutorial)

Kürzlich haben Studierende des User Experience-Tea...

Centos6.9-Installation Mysql5.7.18 Schrittaufzeichnung

Installationsreihenfolge rpm -ivh mysql-community...

Detaillierte Erläuterung des Prozesses zum Erstellen eines MQTT-Servers mit Docker

1. Ziehen Sie das Bild Docker-Pull-Registrierung....

Mysql gibt die Methode zur Datumsbereichsextraktion an

Bei der Datenbankoperation ist der Umgang mit Dat...

Ubuntu 18.04 installiert MySQL 5.7.23

Ich habe MySQL zuvor problemlos in Ubuntu 16.04 i...

Nginx implementiert ein Codebeispiel für die https-Websitekonfiguration

https-Basisport 443. Er wird für etwas verwendet,...