205
Bogues et correctifs
Les.différences.de.rendu.entre.navigateurs.peuvent.poser.toutes.sortes.de.problèmes.avec.
les.mises.en.page.flottantes..Pire,.bien.des.utilisateurs.qui.utilisent.Internet.Explorer.comme.
navigateur. principal. présupposent. par. erreur. qu’il. s’agit. du. comportement. normal. et. ne.
comprennent. pas. pourquoi. les. autres. navigateurs. traitent. les. éléments. flottants. différemment..En.outre,.le.fait.de.donner.à.un.élément.un.layout.semble.dégager.tous.les.éléments.
flottants.adjacents,.comme.si.l’on.choisissait.overflow:hidden.
Il.existe.aussi.un.problème.avec.la.manière.dont.les.éléments.avec.layout.se.redimensionnent.
eux-mêmes..Selon.la.spécification.CSS,.le.contenu.d’un.élément.qui.devient.plus.grand.que.
cet.élément.est.censé.en.déborder..Pourtant,.dans.Internet.Explorer 6.et.ses.versions.antérieures,.les.éléments.avec.layout.s’agrandissent.pour.englober.leur.contenu.(voir.Figure 9.9).
Le contenu déborde de la boîte... ... mais pas dans Internet Explorer 6
et ses versions antérieures.
at leo nec
Pellentesque
Pellentesque
at leo nec
width:100px
La boîte s'allonge, à tort
Figure 9.9
Les éléments dotés d’un layout s’agrandissent à tort pour inclure leur contenu.
Cette.erreur.de.rendu.signifie.que.la.propriété.width.avec.Internet.Explorer.sous.Windows.
agit.en.réalité.plutôt.à.la.manière.de.min-width..Ce.comportement.est.aussi.à.l’origine.de.
nombreuses.défaillances.des.mises.en.page.flottantes..Lorsque.le.contenu.d’une.boîte.flottante.force.à.tort.la.largeur.de.la.boîte.à.s’étendre,.la.boîte.devient.trop.grande.pour.l’espace.
disponible.et.disparaît.en.dessous.des.autres.éléments.flottants..
Parmi.les.autres.problèmes.liés.au.layout,.on.peut.citer :
•. les.éléments.avec.layout.qui.ne.se.réduisent.pas.en.taille.pour.s’adapter.à.leur.contenu ;
•. les.éléments.flottants.qui.sont.automatiquement.dégagés.par.les.éléments.avec.layout ;
•. les.éléments.à.positionnement.relatif.qui.n’obtiennent.pas.de.layout ;
•. les.marges.qui.ne.s’effondrent.pas.entre.les.éléments.avec.layout ;
•. la.zone.réactive.des.liens.de.niveau.bloc.sans.layout.qui.ne.couvre.que.le.texte.des.liens ;
•. les.images.d’arrière-plan.sur.les.éléments.de.liste.qui.apparaissent.et.disparaissent.par.
intermittence.pendant.le.défilement.
Bogues et correctifs
Les.différences.de.rendu.entre.navigateurs.peuvent.poser.toutes.sortes.de.problèmes.avec.
les.mises.en.page.flottantes..Pire,.bien.des.utilisateurs.qui.utilisent.Internet.Explorer.comme.
navigateur. principal. présupposent. par. erreur. qu’il. s’agit. du. comportement. normal. et. ne.
comprennent. pas. pourquoi. les. autres. navigateurs. traitent. les. éléments. flottants. différemment..En.outre,.le.fait.de.donner.à.un.élément.un.layout.semble.dégager.tous.les.éléments.
flottants.adjacents,.comme.si.l’on.choisissait.overflow:hidden.
Il.existe.aussi.un.problème.avec.la.manière.dont.les.éléments.avec.layout.se.redimensionnent.
eux-mêmes..Selon.la.spécification.CSS,.le.contenu.d’un.élément.qui.devient.plus.grand.que.
cet.élément.est.censé.en.déborder..Pourtant,.dans.Internet.Explorer 6.et.ses.versions.antérieures,.les.éléments.avec.layout.s’agrandissent.pour.englober.leur.contenu.(voir.Figure 9.9).
Le contenu déborde de la boîte... ... mais pas dans Internet Explorer 6
et ses versions antérieures.
at leo nec
Pellentesque
Pellentesque
at leo nec
width:100px
La boîte s'allonge, à tort
Figure 9.9
Les éléments dotés d’un layout s’agrandissent à tort pour inclure leur contenu.
Cette.erreur.de.rendu.signifie.que.la.propriété.width.avec.Internet.Explorer.sous.Windows.
agit.en.réalité.plutôt.à.la.manière.de.min-width..Ce.comportement.est.aussi.à.l’origine.de.
nombreuses.défaillances.des.mises.en.page.flottantes..Lorsque.le.contenu.d’une.boîte.flottante.force.à.tort.la.largeur.de.la.boîte.à.s’étendre,.la.boîte.devient.trop.grande.pour.l’espace.
disponible.et.disparaît.en.dessous.des.autres.éléments.flottants..
Parmi.les.autres.problèmes.liés.au.layout,.on.peut.citer :
•. les.éléments.avec.layout.qui.ne.se.réduisent.pas.en.taille.pour.s’adapter.à.leur.contenu ;
•. les.éléments.flottants.qui.sont.automatiquement.dégagés.par.les.éléments.avec.layout ;
•. les.éléments.à.positionnement.relatif.qui.n’obtiennent.pas.de.layout ;
•. les.marges.qui.ne.s’effondrent.pas.entre.les.éléments.avec.layout ;
•. la.zone.réactive.des.liens.de.niveau.bloc.sans.layout.qui.ne.couvre.que.le.texte.des.liens ;
•. les.images.d’arrière-plan.sur.les.éléments.de.liste.qui.apparaissent.et.disparaissent.par.
intermittence.pendant.le.défilement.