L’une des différences majeures est l’interprétation du modèle de boîtes. Derrière ce nom assez énigmatique se cache en fait la gestion de la largeur des balises de type bloc. Rappelons tout d’abord ce à quoi correspondent les différentes grandeurs ayant une influence sur la largeur d’un élément.

Selon les recommandations du W3C, la largeur d’une balise de type bloc (par exemple, une div) se calcule de la manière suivante (manière la plus logique et la plus mathématique) :

Largeur = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Cependant, le modèle de boîtes de Microsoft considère que les bordures et la zone de remplissage appartiennent à la boîte intérieure, et donc la largeur de la boîte est uniquement constituée de :

Largeur = margin-left + width + margin-right

Cela peut donc amener à des décalages entre les différents navigateurs. Et peut donc amener à des problèmes majeurs de positionnement de blocs au cas où les positions soient calculées au pixel près. ;)

Un autre problème majeur vient de la transparence des images au format *.png. Alors que tous les navigateurs acceptent la transparence de ces images, ce n’est absolument pas le cas d’Internet Explorer 6, qui préfère afficher une couleur bleue des plus inesthétiques à la place du canal alpha, qui gère la transparence.

Pourquoi alors utiliser ce format d’image ? Car c’est un format libre, plus efficace (il suffit d’enregistrer une image sous les deux formats et de comparer le résultat pour s’en rendre compte), et est bien plus léger. Enfin, c’est une recommandation du W3C. Raison qui se suffirait à elle seule dans l’absolu. ;)

Pour contrer cela, il est possible d’utiliser un morceau de Javascript, on applique un filtre propriétaire Microsoft pour le rendu de l’image. A noter qu’il vous faudra créer une image transparente pour que cela fonctionne.

Par exemple, on peut utiliser le code Javascript suivant :

Outre les différences inter-navigateurs, des différences existent aussi entre les différentes versions des systèmes d’exploitation. Ainsi, si vous êtes sous Windows ou Linux (et ce sous un même navigateur), des problèmes de décalage peuvent survenir. Ces problèmes viennent de l’interprétation de la taille des polices.

Ces problèmes n’ont pas réellement de solutions. Il est nécessaire de trouver un compromis entre tous les navigateurs. Cette tâche, relativement pénible car nécessitant de nombreux tests sur à la fois des systèmes d’exploitation mais aussi sous des navigateurs différents, justifie en partie la délégation de cette tâche par le développeur métier.

Comme nous venons de le voir dans les quelques exemples ci-dessus, de nombreuses règles s’appliquent lors de l’intégration d’un webdesign. Il est donc requis de connaître à la fois les normes CSS, mais aussi d’autres astuces (tel que des astuces Javascript ci-dessus), afin de s’affranchir de toutes ses incompatibilités.

Enfin, il ne faut pas oublier le fait que ces exemples sont théoriques, et que beaucoup plus de problèmes se posent lors de l’intégration d’une interface graphique, qui plus le temps avance, se complexifie afin de rivaliser avec les effets « Web 2.0 » des concurrents. D’où la nécessité de séparer les deux postes : un développeur métier, et un intégrateur CSS. Collaboration facilitée avec l’utilisation d’un moteur de templates.