Méthodologie générale
CHAPITRE 15
203
Méthodologie de correction de bogues
Les navigateurs actuellement utilisés ne sont pas toujours les plus récents ni les plus
conformes aux standards du W3C. Il est donc probable que certains d’entre eux présentent des rendus assez surprenants, même si votre structure HTML et vos styles
CSS sont parfaitement en règle.
Isoler les bogues d’affichage
Un bogue d’affichage est dû en général à des incompatibilités de navigateurs ou à des
marges (margin, padding) par défaut différentes selon les navigateurs.
La première étape à suivre est d’isoler les éléments qui ne se comportent pas comme
vous l’aviez prévu. Pour cela, trois techniques différentes permettent, grâce aux styles
CSS, de localiser les éléments problématiques :
• l’ajout d’une couleur d’arrière-plan ;
• le masquage des éléments un par un ;
• la suppression de toutes les marges par défaut.
Appliquer une couleur d’arrière-plan
Cette étape permet de localiser les éventuels problèmes de marges ou de fusion de
marges. C’est un phénomène qui se présente lorsque deux éléments de type bloc sont
placés selon le flux normal, l’un sous l’autre. Dans ce cas, les marges haute et basse
fusionnent et la marge finale prend la plus grande des deux valeurs... ce qui cause
parfois des décalages verticaux.
Pour faciliter votre recherche, il est conseillé de colorer l’ensemble des éléments principaux en leur appliquant une couleur d’arrière-plan différente.
Masquer les éléments un par un
Parfois, il ne suffit pas de distinguer l’élément pour comprendre le problème posé. Il
se peut que l’élément provoque des décalages ou autres influences « à distance ».
Dans le même ordre d’idée que la technique précédente, il peut être intéressant de
masquer tous les éléments, un par un, pour déterminer avec certitude lequel est en
cause.
RÉFÉRENCE Fusion de marges
Voici un lien expliquant en détail les problèmes de fusion de marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
CHAPITRE 15
203
Méthodologie de correction de bogues
Les navigateurs actuellement utilisés ne sont pas toujours les plus récents ni les plus
conformes aux standards du W3C. Il est donc probable que certains d’entre eux présentent des rendus assez surprenants, même si votre structure HTML et vos styles
CSS sont parfaitement en règle.
Isoler les bogues d’affichage
Un bogue d’affichage est dû en général à des incompatibilités de navigateurs ou à des
marges (margin, padding) par défaut différentes selon les navigateurs.
La première étape à suivre est d’isoler les éléments qui ne se comportent pas comme
vous l’aviez prévu. Pour cela, trois techniques différentes permettent, grâce aux styles
CSS, de localiser les éléments problématiques :
• l’ajout d’une couleur d’arrière-plan ;
• le masquage des éléments un par un ;
• la suppression de toutes les marges par défaut.
Appliquer une couleur d’arrière-plan
Cette étape permet de localiser les éventuels problèmes de marges ou de fusion de
marges. C’est un phénomène qui se présente lorsque deux éléments de type bloc sont
placés selon le flux normal, l’un sous l’autre. Dans ce cas, les marges haute et basse
fusionnent et la marge finale prend la plus grande des deux valeurs... ce qui cause
parfois des décalages verticaux.
Pour faciliter votre recherche, il est conseillé de colorer l’ensemble des éléments principaux en leur appliquant une couleur d’arrière-plan différente.
Masquer les éléments un par un
Parfois, il ne suffit pas de distinguer l’élément pour comprendre le problème posé. Il
se peut que l’élément provoque des décalages ou autres influences « à distance ».
Dans le même ordre d’idée que la technique précédente, il peut être intéressant de
masquer tous les éléments, un par un, pour déterminer avec certitude lequel est en
cause.
RÉFÉRENCE Fusion de marges
Voici un lien expliquant en détail les problèmes de fusion de marges :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html