Erfahrungsaustausch über die Priorität des Ladens von CSS-Stilen
|
Während der Projektentwicklung bin ich gestern auf ein Problem mit der Stilladepriorität gestoßen. Die Klasse ist definiert und wird beim ersten Laden der Seite erkannt. Einen Moment nach Abschluss des Ladens scheint der Stil neu geschrieben zu sein und der definierte untere Rand funktioniert nicht mehr. Ohne diesen Stil sind die Bedienelemente zusammengepfercht. Während des Tests funktionieren FF und Chrome beide einwandfrei, aber IE8 hat ein Problem. Mit dem IE-Entwicklertool können Sie jedoch sehen, dass margin-bottom erkannt wird und nicht neu definiert wurde. Das Problem ist ziemlich merkwürdig. Diese Seite hat keine normale Struktur. Der Seiteninhalt wird asynchron generiert, im Gegensatz zu einer normalen Seite mit bereits geschriebenen verschiedenen Elementen. Der Grund dafür, dass die Daten beim Laden neu definiert werden, wurde noch nicht gefunden. Das Phänomen besteht darin, dass, wenn Sie auf eines der dicht gedrängten Formularelemente klicken, alle Formulare im Modul, in dem es sich befindet, den Stil „Rand unten“ laden und nicht mehr dicht gedrängt angezeigt werden. Oder verwenden Sie die IE-Entwicklertools, deaktivieren Sie zunächst das Kontrollkästchen vor „Margin-Bottom“ und wählen Sie es dann aus, sodass alle Formularelemente auf der Seite, die „Margin-Bottom“ nicht erkennen, diesen Stil normal laden. Aber das ist definitiv nicht die Lösung des Problems. Kunden dürfen dieses Problem nicht sehen. Die Benutzeroberfläche ist der Teil, der Benutzer am meisten beeindrucken kann, aber es ist auch der Teil, der Benutzer am wahrscheinlichsten irritiert. Dann habe ich verschiedene Methoden ausprobiert, z. B. das Schreiben einer Stildefinition für den unteren Rand, anstatt sie anderen Definitionen hinzuzufügen, aber es hat nicht funktioniert. Das Hinzufügen von !important, einer Methode mit hoher Priorität, funktioniert auch nicht. Der direkte Schreibstil hat eine niedrigere Priorität als !important und es gibt zu viel Code-Redundanz und mehr Nachteile, sodass dies nicht akzeptabel ist. Dann habe ich eine Methode ausprobiert, die Skriptmethode, die funktioniert hat. Der Code lautet wie folgt: Code kopieren Der Code lautet wie folgt:<Skripttyp="text/javascript"> document.getElementByClassName("mar_b_10").style.margin-bottom="10px"; </Skript> Tatsächlich handelt es sich nur um eine erneute Deklaration. Der Inhalt ist derselbe wie die Klasse und der Browser kann ihn erkennen. Das von JS gesteuerte Stilobjekt, document.getElementByClassName("mar_b_10").style.margin-bottom="10px"; Im Allgemeinen hat der von JS gesteuerte Stil eine höhere Priorität, da DOM-Operationen häufig ausgeführt werden, nachdem der DOM-Baum geladen wurde. Nachdem der DOM-Baum geladen war, habe ich js geschrieben, um ihn neu zu definieren. Es gab kein weiteres Überschreiben der Stildefinition und das Ergebnis war recht zufriedenstellend. Im Allgemeinen: [1 wichtige Flagge] > [4 besondere Flaggen] > Deklarationsreihenfolge !important > [Inline-Stil > ID-Selektor > Klasse, Attribut, Pseudoklassen-Selektor > Element-Tag, Pseudoelement-Selektor] Durch die Verwendung von !important kann die Priorität auf die höchste gesetzt werden, gefolgt vom Stilobjekt, dann ID > Klasse > Tag. Darüber hinaus haben die Stile, die in der Reihenfolge der Deklaration nach den Stilen derselben Ebene erscheinen, hohe Priorität. |
<<: Detaillierte Erläuterung der 8 Attributwerte des Hintergrundattributs (Interviewfrage)
>>: Detaillierte Schritte zur Verwendung von Arthas in einem Docker-Container
Artikel empfehlen
MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails
MySQL 5.7 MySQL-Befehlszeilenclient mit Befehlen ...
Prozessdiagramm für das erste Bereitstellungs-Webprojekt von Tomcat
Legen Sie Ihr eigenes Webprojekt im Verzeichnis w...
CentOS 6 verwendet Docker, um ein Beispiel für den Betrieb einer Redis-Master-Slave-Datenbank bereitzustellen
In diesem Artikel wird beschrieben, wie Sie mit D...
Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren
Im eigentlichen Projektentwicklungsprozess wird di...
Beispiele für den Import und Export von MySQL-Tabellendaten
Dieser Artikel beschreibt die Import- und Exportv...
So verstecken Sie RAR-Dateien in Bildern
Sie können dieses Logo lokal als .rar-Datei speic...
CSS erzielt farbenfrohe und intelligente Schatteneffekte
Hintergrund Haben Sie sich jemals gefragt, wie Si...
Das Vue-CLI-Framework implementiert eine Timer-Anwendung
Technischer Hintergrund Diese Anwendung verwendet...
Optimale Webseitenbreite und ihre kompatible Implementierungsmethode
1. Beim Entwerfen einer Webseite ist das Bestimmen...
So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)
Vorwort Tipp: Hier können Sie den ungefähren Inha...
Detailliertes Beispiel zum Ändern des Linux-Kontokennworts
Passwort des persönlichen Kontos ändern Wenn norm...
Reines CSS, um eine horizontale Linienanimation unter dem Element (Hintergrundbild) zu erreichen
Effektbild: html: <div class='site_bar'...
HTML-Tabellen-Tag-Tutorial (7): Hintergrundfarbattribut BGCOLOR
Die Hintergrundfarbe der Tabelle kann über das At...
Installieren Sie Mininet aus dem Quellcode auf Ubuntu 16.04
Mininet Mininet ist eine leichtgewichtige, softwa...
Springboot integriert die Docker-Bereitstellung, um zwei Möglichkeiten zum Erstellen von Docker-Images zu implementieren
Docker ist eine Open-Source-Engine, mit der sich ...