Je pense que tout le monde est relativement familier avec la gestion des BUG CSS courants, tels que : IE6 Three Pixel Gap, IE5/6 Doubled Float-Margin Bug, etc. Mais nous rencontrons souvent des problèmes complexes de BUG CSS. Ce qu'on appelle "complexe" signifie essentiellement que les conditions de déclenchement sont très compliquées, et "BUG" ne signifie pas nécessairement qu'il s'agit d'un BUG de navigateur. Pour ce type de problème, la première chose que nous devons résoudre est de savoir comment localiser le problème. Ce n'est qu'en localisant rapidement le problème que nous pourrons mieux le résoudre.
Pour un positionnement rapide, mon expérience personnelle est généralement la suivante (elle peut essentiellement localiser plus de 90 % des problèmes complexes de BUG CSS que j'ai rencontrés sur Taobao) :
1. Vérifiez si l'étiquette de la page est fermée.
Ne sous-estimez pas cela, cela peut vous causer des ennuis. Le problème CSS BUG qui n'est pas résolu tous les jours, mais il ne vient que de là. Après tout, les modèles de page sont généralement imbriqués par les développeurs, et ils peuvent facilement créer de tels problèmes.
Astuce rapide : vous pouvez utiliser Dreamweaver pour ouvrir le fichier afin de vérifier. Généralement, s'il n'y a pas de balises fermées, elles seront mises en évidence sur un fond jaune.
2. Méthode d'exclusion de style :
certaines pages complexes peuvent charger N fichiers CSS de liens externes, puis supprimer les fichiers CSS un par un, rechercher les fichiers CSS spécifiques déclenchés par le BUG et restreindre la portée du verrouillage.
Pour le fichier de style CSS problématique qui vient d'être verrouillé, supprimez les définitions de style spécifiques ligne par ligne, localisez la définition de style de déclencheur spécifique et même les attributs de style de déclencheur spécifiques.
3. Méthode de confirmation du module
Parfois on peut aussi partir des éléments HTML de la page. Supprimez différents modules HTML dans la page et recherchez le module HTML qui déclenche le problème.
4. Vérifiez si les flottants sont effacés.
En fait, il existe de nombreux problèmes de BUG CSS causés par la non-effacement des flottants. Il est nécessaire de développer une bonne habitude d'effacement des flottants. Il est recommandé d'utiliser une méthode d'effacement des flottants sans balises HTML supplémentaires (essayez d'éviter d'utiliser des méthodes similaires comme overflow:hidden;zoom:1 pour effacer les flottants, ce qui serait trop restrictif). ).
5. Vérifiez si haslayout est déclenché sous IE.
De nombreux BUG CSS complexes sous IE sont étroitement liés au haslayout unique d'IE. Être familier et comprendre haslayout obtiendra deux fois le résultat avec la moitié de l'effort nécessaire pour traiter les bogues CSS complexes. Il est recommandé de lire "On have layout" traduit par old9 (si vous ne pouvez pas traverser le grand GFW, vous pouvez lire le repost sur le bleu)
Astuce : si haslayout est déclenché, les propriétés dans l'outil de débogage d'IE Barre d'outils du développeur IE sera affiché avec une valeur de mise en page égale à -1.
6. La méthode de débogage des bordures et de l'arrière-plan,
comme son nom l'indique, consiste à définir une bordure ou un arrière-plan bien visible (généralement noir ou rouge) pour l'élément à déboguer. Cette méthode est l’une des méthodes les plus couramment utilisées pour déboguer les BUG CSS, et elle est toujours applicable aux BUG complexes. Abordable et respectueux de l'environnement ^^
La dernière chose que je tiens à souligner à tout le monde est que développer de bonnes habitudes d'écriture, réduire les balises supplémentaires, essayer d'être sémantique et se conformer aux normes peut en fait nous éviter bien des BUG CSS très complexes. , c'est Nous nous créons des problèmes. J'espère que tout le monde restera à l'écart des insectes et vivra une vie de mieux en mieux.