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

Erfahrungsaustausch über die Priorität des Ladens von CSS-Stilen

Docker-Container-Protokollanalyse

MySQL Master-Slave-Synchronisationsmechanismus und Tracking-Prozess für Synchronisationsverzögerungsprobleme

Grafisches Tutorial zum Konfigurieren eines Protokollservers unter Linux

Die perfekte Lösung zum Hervorheben von Schlüsselwörtern in HTML

Mehrere beliebte Website-Navigationsrichtungen in der Zukunft

Zusammenfassung praktischer Fähigkeiten, die häufig in Vue-Projekten verwendet werden

Der Unterschied zwischen Name und Wert im Eingabe-Tag

Verwenden von Zabbix zum Überwachen des Ogg-Prozesses (Windows-Plattform)

Vier Modi zum Öffnen und Schließen von Oracle

So verwenden Sie Celery und Docker zum Ausführen periodischer Aufgaben in Django

Artikel empfehlen

Nginx-Überwachungsprobleme unter Linux

So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

Erstellen Sie in 5 Minuten einen WebRTC-Videochat

So implementiert Webpack das Caching statischer Ressourcen

Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8

Warum funktioniert Ihre Größe: 100 % nicht?

So verwenden Sie Docker-Container zur Implementierung der Proxy-Weiterleitung und Datensicherung

Docker-Grundlagen

Diagramm des Datenübertragungsprozesses beim dritten TCP-Handshake

Docker stellt eine Verbindung zum Host-Mysql-Vorgang her

Allgemeine Funktionen der MySQL-Grundlagen

So betreten und verlassen Sie den Docker-Container

Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.20\5.7.21

So implementieren Sie das Rasterlayout mit Intervallen perfekt auf der Seite

Häufige Verwendung von Hooks in React