Ich glaube, dass jeder mit dem Umgang mit häufigen CSS-BUGs relativ vertraut ist, wie zum Beispiel: IE6 Three Pixel Gap, IE5/6 Doubled Float-Margin Bug usw. Wir stoßen jedoch häufig auf komplexe CSS-BUG-Probleme. Das sogenannte „komplexe“ bedeutet im Wesentlichen, dass die Auslösebedingungen sehr kompliziert sind, und „BUG“ bedeutet nicht unbedingt, dass es sich um einen Browser-BUG handelt. Bei dieser Art von Problem müssen wir zunächst herausfinden, wie wir das Problem lokalisieren können. Nur wenn wir das Problem schnell lokalisieren, können wir das Problem besser lösen.
Was die schnelle Positionierung angeht, ist meine persönliche Erfahrung im Allgemeinen wie folgt (im Grunde kann es mehr als 90 % der komplexen CSS-BUG-Probleme lokalisieren, auf die ich auf Taobao gestoßen bin):
1. Überprüfen Sie, ob das Etikett der Seite geschlossen ist
. Es kann Ihnen Probleme bereiten. Das CSS-BUG-Problem wird nicht jeden Tag gelöst, aber es ist nur darauf zurückzuführen. Schließlich werden Seitenvorlagen in der Regel von Entwicklern verschachtelt, was leicht zu solchen Problemen führen kann.
Kurzer Tipp: Sie können die zu überprüfende Datei mit Dreamweaver öffnen. Wenn keine geschlossenen Tags vorhanden sind, werden diese im Allgemeinen mit einem gelben Hintergrund hervorgehoben.
2. Stilausschlussmethode:
Einige komplexe Seiten laden möglicherweise N externe Link-CSS-Dateien, löschen dann die CSS-Dateien einzeln, suchen die spezifischen CSS-Dateien, die durch den Fehler ausgelöst wurden, und schränken den Sperrbereich ein.
Löschen Sie für die problematische CSS-Stildatei, die gerade gesperrt wurde, die spezifischen Stildefinitionen Zeile für Zeile, suchen Sie die spezifische Triggerstildefinition und sogar die spezifischen Triggerstilattribute.
3. Modulbestätigungsmethode
Manchmal können wir auch von den HTML-Elementen der Seite ausgehen. Löschen Sie verschiedene HTML-Module auf der Seite und suchen Sie das HTML-Modul, das das Problem auslöst.
4. Überprüfen Sie, ob Floats gelöscht werden.
Tatsächlich gibt es viele CSS-BUG-Probleme, die dadurch verursacht werden, dass Floats nicht gelöscht werden. Es ist notwendig, eine gute Angewohnheit beim Löschen von Floats zu entwickeln. Es wird empfohlen, eine Methode zum Löschen von Floats ohne zusätzliche HTML-Tags zu verwenden (versuchen Sie, ähnliche Methoden wie overflow:hidden;zoom:1 zum Löschen von Floats zu vermeiden, da diese zu restriktiv sind). ).
5. Überprüfen Sie, ob Haslayout unter IE ausgelöst wird.
Viele komplexe CSS-BUGs unter IE stehen in engem Zusammenhang mit dem einzigartigen Haslayout von IE. Wenn Sie sich mit haslayout auskennen und es verstehen, können Sie bei der Bewältigung komplexer CSS-Fehler doppelt so gute Ergebnisse erzielen wie bei halbiertem Aufwand. Es wird empfohlen, „Über das Layout“ zu lesen, übersetzt von old9 (wenn Sie die große GFW nicht überqueren können, können Sie den Repost auf dem Blauen lesen).
Kurzer Tipp: Wenn haslayout ausgelöst wird, werden die Eigenschaften im IE Developer Toolbar des IE-Debugging-Tools angezeigt Es wird angezeigt, dass der Layoutwert -1 ist.
6. Die Methode zum Debuggen von Rändern und Hintergrund besteht,
wie der Name schon sagt, darin, einen auffälligen Rahmen oder Hintergrund (normalerweise schwarz oder rot) für das zu debuggende Element festzulegen. Diese Methode ist eine der am häufigsten verwendeten Methoden zum Debuggen von CSS-Fehlern und ist immer noch auf komplexe Fehler anwendbar. Erschwinglich und umweltfreundlich ^^
Das Letzte, was ich allen betonen möchte, ist, dass die Entwicklung guter Schreibgewohnheiten, die Reduzierung zusätzlicher Tags, der Versuch, semantisch zu sein und die Einhaltung von Standards zu gewährleisten, uns tatsächlich oft vor vielen besonders komplexen CSS-Fehlern bewahren kann , es ist: Wir machen uns selbst Ärger. Ich hoffe, dass sich alle von Insekten fernhalten und ein immer besseres Leben führen.