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
Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3
Das dürfte etwas sein, was viele Leute gemacht ha...
Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.
Inhaltsverzeichnis Docker-System df Docker-System...
Tutorial zum Kompilieren und Installieren von MySQL 5.7.17 aus dem Quellcode auf dem Mac
1. Herunterladen und entpacken nach: /Users/xiech...
Tutorial zur Installation und Browserverwendung des leichten Objektspeicherdienstes Minio
Inhaltsverzeichnis Einführung Installieren 1. Ers...
CSS3 erzielt einen coolen Karusselleffekt mit geschnittenen Bildern
Heute lernen wir, wie man mit CSS eine coole Bild...
Implementierung der TCPWrappers-Zugriffskontrolle in Centos
1. Übersicht über TCP-Wrapper TCP Wrapper „verpac...
Vue implementiert einfache Kommentarfunktion
In diesem Artikel wird der spezifische Code von V...
Einführung in die Verwendung des Formulars „OnSubmit“ und des Eingabetyps „Bild“
Wenn hier ein <input type="image">...
So installieren Sie Nginx an einem bestimmten Ort im Centos-System
Wie installiere ich Nginx an einem bestimmten Ort...
So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit
Egal ob Sie Webdesigner oder UI-Designer sind, di...
Welche Codes sollte ich beherrschen, wenn ich Webdesign lerne?
In diesem Artikel werden einige der Techniken ausf...
WeChat Mini-Programm implementiert den Likes-Dienst
In diesem Artikel wird der spezifische Code für d...
Implementierung der Leistungsoptimierung des Element-Shuttle-Frames
Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...
Detaillierte Erklärung der Verwendung und des Unterschieds zwischen nohup und & in Linux
Beispiel: Wir verwenden den Python-Code loop_hell...
Eine kurze Diskussion über die Farbabstimmungsfähigkeiten von Webseiten (ein Muss für Front-End-Entwickler)
Im Allgemeinen sollte die Hintergrundfarbe einer W...