45
Vue d’ensemble du modèle de formatage visuel
Le.remplissage,.les.bordures.et.les.marges.peuvent.être.appliqués.sur.tous.les.côtés.d’un.
élément.ou.sélectivement.sur.certains.d’entre.eux..Les.marges.peuvent.également.avoir.des.
valeurs.négatives.et.être.utilisées.pour.une.variété.de.techniques..
Internet Explorer et le modèle de boîte
Malheureusement,.les.anciennes.versions.d’Internet.Explorer.ainsi.qu’Internet.Explorer 6.
en. mode. Quirks. utilisent. leur. propre. modèle. de. boîte. non. standard..Au. lieu. de. mesurer.
simplement.la.largeur.du.contenu,.ces.navigateurs.considèrent.la.propriété.width.comme.la.
somme.de.la.largeur.du.contenu,.du.remplissage.et.des.bordures..C’est.cohérent,.puisque,.en.
pratique,.les.boîtes.possèdent.une.taille.fixe.et.que.le.remplissage.s’insère.à.l’intérieur..Plus.
vous.ajoutez.de.remplissage,.moins.il.y.a.de.place.pour.le.contenu..Il.n’en.reste.pas.moins.
que.la.spécification.ne.reprend.pas.ce.raisonnement,.et.que.le.fait.que.ces.versions.d’Internet.
Explorer. n’en. tiennent. pas. compte. pose. de. vrais. problèmes.. Dans. le. précédent. exemple,.
la.largeur.totale.de.la.boîte.serait.ainsi.de.90 pixels.dans.Internet.Explorer 5.x..Ce.dernier.
considère.en.effet.que.les.5 pixels.de.remplissage.de.chaque.côté.font.partie.de.la.largeur.de.
70 pixels.au.lieu.de.s’y.ajouter.(voir.Figure 3.3).
La. propriété. CSS 3. box-sizing. permet. de. définir. le. modèle. de. boîte. à. utiliser ;. elle. a.
cependant. peu. de. chance. d’être. largement. utilisée. sauf. dans. certaines. circonstances. bien.
particulières.
Figure 3.3
Le modèle de boîte
propriétaire d’Internet
Explorer peut rendre des
éléments plus petits que
prévu.
Largeur : 70px
Marge : 10px
Remplissage : 5px
90px
10px
10px
60px
5px
5px
Par.chance,.il.existe.plusieurs.moyens.de.résoudre.ce.problème,.comme.vous.le.verrez.au.
Chapitre 9..La.meilleure.solution,.et.de.loin,.consiste.cependant.à.éviter.tout.simplement.le.
problème..Pour.cela,.n’ajoutez.pas.de.remplissage.aux.éléments.qui.possèdent.une.largeur.
définie..Tâchez.d’ajouter.du.remplissage.ou.des.marges.au.parent.ou.à.l’enfant.de.l’élément..
Vue d’ensemble du modèle de formatage visuel
Le.remplissage,.les.bordures.et.les.marges.peuvent.être.appliqués.sur.tous.les.côtés.d’un.
élément.ou.sélectivement.sur.certains.d’entre.eux..Les.marges.peuvent.également.avoir.des.
valeurs.négatives.et.être.utilisées.pour.une.variété.de.techniques..
Internet Explorer et le modèle de boîte
Malheureusement,.les.anciennes.versions.d’Internet.Explorer.ainsi.qu’Internet.Explorer 6.
en. mode. Quirks. utilisent. leur. propre. modèle. de. boîte. non. standard..Au. lieu. de. mesurer.
simplement.la.largeur.du.contenu,.ces.navigateurs.considèrent.la.propriété.width.comme.la.
somme.de.la.largeur.du.contenu,.du.remplissage.et.des.bordures..C’est.cohérent,.puisque,.en.
pratique,.les.boîtes.possèdent.une.taille.fixe.et.que.le.remplissage.s’insère.à.l’intérieur..Plus.
vous.ajoutez.de.remplissage,.moins.il.y.a.de.place.pour.le.contenu..Il.n’en.reste.pas.moins.
que.la.spécification.ne.reprend.pas.ce.raisonnement,.et.que.le.fait.que.ces.versions.d’Internet.
Explorer. n’en. tiennent. pas. compte. pose. de. vrais. problèmes.. Dans. le. précédent. exemple,.
la.largeur.totale.de.la.boîte.serait.ainsi.de.90 pixels.dans.Internet.Explorer 5.x..Ce.dernier.
considère.en.effet.que.les.5 pixels.de.remplissage.de.chaque.côté.font.partie.de.la.largeur.de.
70 pixels.au.lieu.de.s’y.ajouter.(voir.Figure 3.3).
La. propriété. CSS 3. box-sizing. permet. de. définir. le. modèle. de. boîte. à. utiliser ;. elle. a.
cependant. peu. de. chance. d’être. largement. utilisée. sauf. dans. certaines. circonstances. bien.
particulières.
Figure 3.3
Le modèle de boîte
propriétaire d’Internet
Explorer peut rendre des
éléments plus petits que
prévu.
Largeur : 70px
Marge : 10px
Remplissage : 5px
90px
10px
10px
60px
5px
5px
Par.chance,.il.existe.plusieurs.moyens.de.résoudre.ce.problème,.comme.vous.le.verrez.au.
Chapitre 9..La.meilleure.solution,.et.de.loin,.consiste.cependant.à.éviter.tout.simplement.le.
problème..Pour.cela,.n’ajoutez.pas.de.remplissage.aux.éléments.qui.possèdent.une.largeur.
définie..Tâchez.d’ajouter.du.remplissage.ou.des.marges.au.parent.ou.à.l’enfant.de.l’élément..