28172 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous,

je me suis aperçu, en faisant des tests sur les différents navigateurs que j'avais un problème sur la taille d'une police de caractères entre d'une part Internet Explorer 8 (je suis sous Windows XP) et d'autre part tous les autres navigateurs (Firefox, Google chrome, Safari et Opéra).

J'ai cherché à comprendre cette différence, car je suppose qu'il s'agit d'une différence de taille mais a priori je ne sais pas.

div#content p,
div#content span {font-family : "Arial", "sans-serif";
font-size : 12px;
}


<div id="content">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div> 


Donc en visualisant le résultat sur ces deux navigateurs (Firefox et MSIE) j'ai remarque sur la dernière ligne et en fin de ligne que je n'avais pas le même nombre de 'BLA'.

Comment expliquer cette différence ? Est-ce que MSIE a une taille des police différente des autres navigateurs ? Et comment résoudre ce problème car j'ai fait plusieurs tests et je ne suis pas arriver à obtenir la même taille de cette police sur les deux navigateurs ?

@+
Modifié par Artemus24 (04 Jun 2011 - 14:12)
Bonjour Artemus Smiley smile

Oui, les tailles apparentes des polices peuvent légèrement varier d’un navigateur à l’autre. Ils n’utilisent pas tous les mêmes stratégies d’affichage des polices. Si tu es sous Windows, tu pourra constater que Safari utilise sa propre technique de lissage et a tendance à épaissir le trait des fonts, par défaut. IE utilise Clear-Type dont le rendu est différent de celui de Safari. Opera et FireFox utilise ou n'utilise pas Clear-Type selon la configuration de Windows, tandis que IE peut utiliser Clear-Type indépendant de la configuration de Windows.

Et encore, ce n’est pour parler que d’une plateforme.

Même si ce n’est pas le cas présentement, si dans ton CSS, tu utilise des dimensions relatives, c’est à dire en EM, EX ou autres, alors cela peut être une autre source de différences encore.

D’autres cause encore peuvent être des marge ou paddings par défaut différents d’un navigateur à l’autre.

Avec le temps, tu découvrira qu’il est tout autant illusoire qu’inutile de vouloir reproduire des design identiques au pixel prêt sur tous les navigateurs. La reproduction sur l’écran d’un navigateur, ce n’est pas la même chose que la reproduction par l’imprimerie.
Modifié par hibou57 (04 Jun 2011 - 13:59)
Bonjour à toutes et à tous,

merci Hibou57 !

Après plusieurs tests, j'ai pensé qu'il devait exister une subtilité puis ensuite je me suis dit qu'il ne devait pas exister de solutions. Surtout que dans la documentation que je possède, je n'ai rencontré aucun commentaire à ce sujet.

Pour être conforme, j'ai supprimé toutes les marges et padding à partir du sélecteur universelle '*'.

Oui, j'ai aussi constaté que la forme des caractères pouvait changé d'un navigateur à un autre mais je ne pensais pas que la largeur des caractères pouvait être impactée.

@+
Modifié par Artemus24 (04 Jun 2011 - 14:11)