Bien qu'il puisse y avoir de nombreux bugs dans le navigateur, cela ne signifie pas qu'il y a des bugs lorsque vous vous sentez différent. Le problème peut avoir plusieurs raisons, le producteur a donc besoin de certaines méthodes pour résoudre le problème.
Il est sage de choisir un navigateur avancé pour les tests, comme Opera 9.2, Firefox 2.0 ou Safari 3.0, qui prend mieux en charge CSS 2.1. N'utilisez pas IE 6 comme seul navigateur de test, car IE 6 présente le plus de problèmes. ce qui est très défavorable aux producteurs (surtout les débutants) pour comprendre les spécifications de CSS 2.1 et déterminer si les performances du navigateur sont correctes.
Si le test est correct dans les navigateurs avancés, mais qu'il y a un problème dans IE, on peut essentiellement déterminer que le problème vient d'IE.
Si l'affichage dans les navigateurs avancés est incorrect, vous pouvez d'abord porter le jugement préliminaire suivant :
1. Si l'orthographe est correcte, vous pouvez utiliser la vérification du W3C ou la fonction de vérification du logiciel d'édition de pages Web pour vérifier si les balises du document (X)HTML correspondent, si l'ordre d'imbrication est correct, si les balises vides sont fermés et si l'orthographe CSS est correcte. Une imbrication incorrecte et une orthographe incorrecte sont des erreurs très courantes.
Astuce : Il existe désormais de nombreux logiciels d'édition qui peuvent fournir des fonctions de vérification (X)HTML et CSS, notamment si le navigateur prend en charge les attributs CSS, etc. Par exemple : Dreamweaver 8 ou supérieur, TopStyle et autres logiciels.
Astuce : Le logiciel complémentaire "Firebug" dans Firefox est un outil très utile. Il peut non seulement vérifier si (X)HTML, CSS et JavaScript sont corrects, mais aussi afficher dynamiquement les cadres et les positions des éléments dans la page. est très bon pour déboguer les pages Web du plug-in auxiliaire.
2. Existe-t-il une DTD adaptée ?
Dans d'autres chapitres de ce livre, l'importance de DOCTYPE a été soulignée à plusieurs reprises. Différents DOCTYPE affectent directement l'interprétation de (X)HTML et CSS par le navigateur.
3. Le navigateur prend-il en charge les attributs CSS ? Bien que les navigateurs modernes prennent en charge la plupart des spécifications CSS 2.1 et certaines spécifications CSS 3, comme présenté dans le chapitre précédent, certains attributs CSS n'ont pas été largement pris en charge par les navigateurs, donc dans Quand un certain attribut le fait ne prend pas effet, veuillez confirmer si le navigateur le prend en charge.
4. Isolez le problème pour mettre en évidence la zone problématique, par exemple en ajoutant une bordure ou une couleur d'arrière-plan frappante à l'élément.
Si l'ajout d'une bordure résout le problème, il s'agit alors d'un problème de chevauchement des marges.
Si un arrière-plan est ajouté mais que l'arrière-plan n'est pas affiché, cela peut être dû à des fonctionnalités spéciales ou à l'élément flottant n'est pas fermé.
Essayez de modifier certains attributs, en particulier les attributs qui déclenchent hasLayout d'IE, pour déterminer s'il s'agit d'un bug courant dans IE.
5. Configurez un test de base Si cela ne résout pas le problème, vous pouvez copier le fichier problématique et supprimer le (X)HTML supplémentaire, ne laissant que la partie problématique.
Supprimez le problème de commentaire dans le (X)HTML et voyez si le problème disparaît.
Supprimez les espaces entre les éléments et voyez si le problème disparaît.
Commentez ensuite la feuille de style par blocs jusqu'à ce que le problème disparaisse, le style qui vient d'être commenté est alors le problème.
6. Résoudre le problème plutôt que résoudre le phénomène. Trouver la cause profonde du problème et le résoudre est le but ultime, plutôt que d'utiliser un hack complexe pour rendre la page Web « belle » juste pour s'adapter aux performances. Si vous ne résolvez pas le problème à la racine, vous risquez de rencontrer d'autres problèmes lors de la mise à niveau du navigateur. Dans le même temps, le piratage peut entraîner l'apparition de nouveaux problèmes, notamment le déclenchement ou l'évitement du déclenchement de l'attribut hasLayout d'IE.
Une autre façon de penser peut également permettre d'éviter le problème, comme annuler l'attribut margin de l'élément et définir à la place l'attribut padding de son élément parent.
N'utilisez Hack que lorsque le problème ne peut vraiment pas être résolu.