A propos du Modèle de boîte Microsoft (ou "quirks")

Articlecss

Publié par le , mis à jour le (39574 lectures)

modele css quirks boite

Internet Explorer interprète les dimensions CSS différemment des autres navigateurs, ou plutôt interprétait...

Contrairement à ce que laissent supposer certains articles et propos de designers "chevronnés" qui n'en démordent pas, Internet Explorer 6 de Microsoft interprète les dimensions CSS des pages html et xhml valides de la même manière que les autres navigateurs de même génération.

Le fameux mode Quirks

Avec les versions 5.0 et 5.5 d'Internet Explorer lorsque vous avez, par exemple, une "boîte" large de 200 px (zone de contenu), avec des marges intérieures de 20px (padding) et une bordure (border) de 5px vous obtenez une boîte d'une largeur totale de 200px alors que pour les autres navigateurs la largeur totale est de 250px (200+20+20+5+5) Les paddings et les borders, s'ajoutent normalement à la zone de contenu de 200px.

Ce mode de calcul où les propriétés visibles (espaces et bords) sont incluses dans le calcul de la boîte est appelé "mode Quirks". C'est un modèle de boîte ancien et spécifique à Microsoft.

Avec la version 6.0 d'Internet Explorer, l'interprétation des dimensions CSS des boîtes est la même que pour les autres navigateurs, c'est le modèle de boîte dit "Standard". Il y a cependant quelques exceptions à cette interprétation qui entretiennent l'illusion que rien n'a changé du côté de chez Microsoft.

En effet, IE 6.0 passe en mode Quirks dans les cas suivants :

  • une page HTML sans DOCTYPE (donc non valide),
  • une page HTML Frameset ou Transitionnel avec un DOCTYPE tronqué (sans URL de la DTD),
  • une page HTML qui contient n'importe quel caractère avant la DTD,
  • une page HTML avec une DTD d'une version de HTML inférieure à la version 4,
  • une page avec un DOCTYPE XHTML précédé de la déclaration XML (déclaration inutile pour une page xhtml servie en text/html).

Dans ces différents cas, Internet Explorer 6.0 bascule en mode Quirks et interprète les boîtes selon le modèle Microsoft constaté dans les versions précédentes du navigateur, ce qui pose souvent de lourds problèmes de compatibilité.

Dans tous les autres cas il n'y a pas de différence avec les autres navigateurs... pour le plus grand bonheur des concepteurs web.

Pour faciliter la compatibilité de vos documents web, assurez-vous de leur appliquer un Doctype valide et conforme, et en règle générale de leur parfait respect des standards.

Tableau récapitulatif des différences de mode standard et quirks selon les navigateurs : http://www.quirksmode.org/css/quirksmode.html