HTML-, CSS- und JS-Kompatibilitätsbaum (IE, Firefox, Chrome)
|
Was ist ein Baum im Webdesign? Einfach ausgedrückt: Wenn Sie auf einen Link klicken, wird das Unterverzeichnis erweitert, und wenn Sie erneut klicken, wird es geschlossen. Dies ist der einfachste Baum. Die Implementierung ist ebenfalls sehr einfach. In CSS gibt es eine Eigenschaftsanzeige, mit der gesteuert werden kann, ob der Inhalt angezeigt wird oder nicht. Anschließend können Sie JS verwenden, um die Eigenschaften von CSS zu steuern und dies zu erreichen. Siehe den folgenden Code: <div>Verzeichnis der obersten Ebene</div> <div id="Menüliste"> <div>Menü 1</div> <div>Menü 2</div> <div>Menü 3</div> </div> Dies ist der Prototyp des Baums. Natürlich fügt der Anfangszustand das CSS-Anzeigeattribut hinzu. Die am häufigsten verwendeten Anzeigeattribute sind „none“ und „block“. None bedeutet keine Anzeige, während Block wie ein Blocktypelement angezeigt wird. Schauen wir uns den Code an <div>Verzeichnis der obersten Ebene</div> <div id="Menüliste" style="Anzeige:keine"> <div>Menü 1</div> <div>Menü 2</div> <div>Menü 3</div> </div> Auf diese Weise wird beim Ausführen der Seite nur das Verzeichnis der obersten Ebene angezeigt. Wenn Sie es steuern möchten, müssen Sie js-Code hinzufügen 1. Holen Sie sich zuerst die Menüliste var Menüliste = document.getElementById("Menüliste"); 2. Oder das Objekt kann seine CSS-Eigenschaften steuern menulist.style.display="Block"; Urteil hinzufügen wenn (menulist.style.display="keine") menulist.style.display="Block"; anders Menüliste.style.display="keine"; Auf diese Weise wird der primitivste Baum erzeugt und der endgültige Code <Skript> Funktion showmenu() { var Menüliste = document.getElementById("Menüliste"); wenn (menulist.style.display=="keine") menulist.style.display="Block"; anders Menüliste.style.display="keine"; } </Skript> <div auf click="showmenu();">Top-Verzeichnis</div> <div id="Menüliste" style="Anzeige:keine"> <div>Menü 1</div> <div>Menü 2</div> <div>Menü 3</div> </div> Lange Zeit habe ich diese Methode verwendet, um Eigenschaftsverzeichnisse zu erstellen. Egal, wie komplex das Verzeichnis war, diese Methode hat jedes Mal funktioniert. Der folgende Screenshot zeigt den laufenden Effekt eines komplexeren Baumverzeichnisses, das ich unter IE erstellt habe:   Etwas Schreckliches ist passiert. In Chrome sah alles durcheinander aus. Nach einiger Informationssuche habe ich endlich den Grund gefunden. Neben Block und None hat Display viele andere Attribute. Block wird in Blöcken angezeigt und ich habe Tabellen für das Layout verwendet. Gott weiß, ob Tabellen und Blöcke einen tiefen Hass haben. Microsoft hält es für klug, seinen Hass zu ignorieren, während Chrome sich immer noch ehrlich an die Standards hält, und das gilt auch für Firefox. Es gibt also immer noch ein Problem in ihrer Erklärung. So lösen Sie dieses Problem: Display verfügt außerdem über eine Eigenschaft namens table-cell, die den Inhalt in Form einer Tabelle darstellt. Genau das möchte ich tun, wenn ich eine Tabelle für das Layout verwende. Im Folgenden sind die kompatiblen Darstellungen von drei Browsern aufgeführt:  IE6  Chrom2  Firefox 3.5 |
>>: Beispiel zum Ändern von Stilen über CSS-Variablen
Artikel empfehlen
Übersicht über die Unterschiede zwischen Linux TTY/PTS
Wenn wir einen Buchstaben auf der Tastatur eingeb...
JavaScript, um einen ausgefallenen Karusselleffekt zu erzielen
In diesem Artikel werden zwei Methoden zur Implem...
Chrome überwacht Cookie-Änderungen und weist Werte zu
Der folgende Code führt die Überwachung von Cooki...
Detaillierte Erklärung zur Verwendung von Standard in MySQL
NULL- und NOT NULL-Modifikatoren, DEFAULT-Modifik...
So kehren Sie schnell von unten nach oben zurück, wenn die Webseite zu viele Inhalte enthält
Bei der Web-Frontend-Entwicklung ist es unvermeidl...
Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind
Hier sind einige Punkte, die Sie bei der Registri...
So implementieren Sie eine einzelne Dateikomponente in JS
Inhaltsverzeichnis Überblick Einzelne Dateikompon...
Detailliertes Tutorial zum Bereitstellen eines Django-Projekts mit Docker auf CentOS8
Einführung In diesem Artikel stellen wir vor, wie...
CSS imitiert Fernbedienungstasten
Hinweis: Diese Demo wurde in der Miniprogrammumge...
HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf
<br />Die Kopfzeile bezieht sich auf die ers...
Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann
Inhaltsverzeichnis Vorwort Szenarioanalyse Zusamm...
HTML + CSS zum Erzielen des Spezialeffektcodes für die Aufladung der Wassertropfenfusion
Inhaltsverzeichnis Vorwort: erreichen: Zusammenfa...
So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest
Inhaltsverzeichnis Einige grundlegende Konfigurat...
Lösung für das Flashback-Problem nach der Eingabe des Passworts in der MySQL-Datenbank
MySQL-Datenbank stürzt nach Eingabe von Passwort ...
IE8 verwendet den Multikompatibilitätsmodus, um Webseiten normal anzuzeigen
IE8 wird mehrere Kompatibilitätsmodi haben. Der IE...