212
Maîtrise des CSS
.myFloat {
float: left;
width: 200px;
}
p {
margin-left: 200px;
}
Lorsque.vous.procédez.ainsi,.un.mystérieux.interstice.de.3 pixels.apparaît.entre.le.texte.et.
l’élément.flottant..Dès.le.point.où.l’élément.flottant.s’arrête,.l’interstice.de.3 pixels.disparaît.
(voir.Figure 9.11).
Figure 9.11
Démonstration du
bogue du décalage
de texte de 3 pixels
d’Internet Explorer 5
et 6.
float: left;
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit. Sed sit amet
Mystérieux interstice
de 3 pixels adjacent
à l'élément flottant
Boîte de ligne
Le.correctif.à.ce.bogue.se.déploie.en.deux.phases..Tout.d’abord,.l’élément.contenant.le.texte.
prime.apparemment.le.décalage.du.texte..Comme.Internet.Explorer 6.et.ses.versions.antérieures.sous.Windows.traitent.la.hauteur.comme.une.valeur.min-height,.le.fait.de.définir.
une.hauteur.de.petite.taille.n’a.aucun.effet.sur.les.dimensions.effectives.de.l’élément.dans.
ce.navigateur..En.revanche,.cela.apparaît.avec.les.autres.navigateurs,.si.bien.que.vous.devez.
masquer.cette.règle.à.tous.les.navigateurs.sauf.Internet.Explorer 6.et.ses.versions.antérieures.
sous.Windows..Le.meilleur.moyen.de.le.faire.est.de.déplacer.ces.styles.dans.un.fichier.CSS.
séparé.en.utilisant.des.commentaires.conditionnels..
p {
height: 1%;
}
Malheureusement,.cette.technique.pose.un.autre.problème..Comme.vous.l’avez.vu.précédemment,.les.éléments.avec.un.layout.sont.contraints.de.posséder.une.forme.rectangulaire.
et. apparaissent. à. côté. des. éléments. flottants. et. non. au-dessous.. L’ajout. de. 200  pixels. de.
remplissage.crée.en.fait.un.interstice.de.200 pixels.entre.l’élément.flottant.et.le.paragraphe.
dans.Internet.Explorer 5.et.6.sous.Windows..Pour.éviter.cela,.vous.devez.réinitialiser.à.zéro.
les.marges :
p {
height: 1%;
margin-left: 0;
}