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
SASS Style Programmierhandbuch für CSS
Da immer mehr Entwickler SASS verwenden, müssen w...
Elegantere Verarbeitung von Datumsangaben in JavaScript basierend auf Day.js
Inhaltsverzeichnis Warum day.js verwenden? Moment...
So beheben Sie den MySQL-Fehler 10061
In diesem Artikel erfahren Sie die Lösung für das...
Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts
Vorwort In der täglichen Entwicklung stoßen wir h...
Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen
Benutzergruppen Unter Linux muss jeder Benutzer e...
Implementierung effektiver Benutzergruppen und anfänglicher Benutzergruppen in Linux
Überprüfen Sie zuerst die Datei /etc/group: [root...
HTML+CSS zur Realisierung einer einfachen Navigationsleistenfunktion
Ohne weitere Umschweife komme ich gleich zum Code...
Docker verwendet Root, um in den Container zu gelangen
Führen Sie zuerst den Docker-Container aus Führen...
CSS3-Countdown-Effekt
Ergebnisse erzielen Implementierungscode html <...
Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.
Wenn Menschen zu lange untätig waren, denken sie,...
Detaillierte Erklärung der Zusammenhänge zwischen Bildformat und Design im Webdesign
Warum möchte ich den Inhalt in diesem Bereich orga...
Prinzip der Ereignisdelegierung in JavaScript
Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Windows
In diesem Artikel finden Sie das grafische Tutori...
Eine kurze Diskussion darüber, wie man schöne bedingte Ausdrücke in JS schreibt
Inhaltsverzeichnis Mehrere bedingte Anweisungen M...
docker run -v mountet Datenvolumes abnormal und der Containerstatus wird immer neu gestartet
Symptome: Nach dem Hinzufügen des Parameters -v z...