Le positionnement en CSS
CHAPITRE 7
101
• d’attribuer une hauteur explicite (height) à un élément doté de marges internes
(padding) ou de bordures horizontales.
On préférera dans les deux cas recourir aux marges externes (margin).
Considérons maitenant un bloc large de 150 pixels qu’on souhaite écarter du reste du
document par 20 pixels à droite. Recourir pour cela à la propriété padding-right
posera des problèmes de modèle de boîte. Il convient de préférer à une telle marge
interne la propriété margin-right. Une autre solution consiste à conserver le padding, mais à n’expliciter aucune largeur pour le bloc (on pourra contraindre sa taille
en la limitant par des marges). Voici le code initial :
C’est l’archétype du problème de compatibilité provoqué par différentes interprétations du modèle de boîte. Tous les autres navigateurs, interprétant correctement la
norme, réserveront à un tel bloc un espace de 170 px. Seul Internet Explorer, en
mode « quirks », se distinguera en lui attribuant une taille de 150 px.
INTERNET EXPLORER Mode d’affichage
Le modèle de boîte erroné de Microsoft se nomme « mode Quirks ». Il concerne par défaut toutes les versions d’Internet Explorer inférieures à 6. Depuis IE6, il est possible de choisir son mode d’affichage :
« standard » ou « quirks ». Voici les différents cas où Internet Explorer passe en mode « quirks » :
• une page HTML sans doctype (donc non valide) ;
• une page HTML avec un doctype tronqué ou mal rédigé ;
• une page HTML avec une DTD d’une version de HTML inférieure à 4 ;
• une page avec un doctype XHTML précédé du prologue XML (prologue inutile pour une page xhtml
servie en text/html).
Il est bien évidemment recommandé de se conformer au mode d’affichage standard afin de faciliter la
compatibilité naturelle de vos documents.
Notons enfin que la version IE7 ne passe plus en mode « quirks » dans le dernier cas cité.
HTML

CSS
div {
width: 150px;
padding-right: 20px;
}