Doctype strict et images affichées bizarrement...

Bonjour,
Je viens de faire passer passer ma page en doctype strict et je m'étais rendu compte que chaque image de mon site avait un petit espace de 4-5 pixels en dessous, e qui rendait moche les liens de mon portfolio (la bordure grise du lien descendait un peu plus bas que l'image entourée)

J'ai appliqué l'attribut css img{display:block;} pour y remédier, certes, mais je voudrais savoir pourquoi un tel comportement sur les navigateurs excepté IE6 qui lisait les images sans "marge" en dessous (çàd un rendu parfait ^^) - histoire de comprendre mieux certaines choses et éventuellement prévenir de prochains bugs.

Merci d'avance.
http://dsofficial.free.fr/public/new_theme3/

(PS/HS : IE6 me pose souvent moins de problèmes qu'IE7 ou FF2, mystère.)
Modifié par darkstar2023 (23 Feb 2010 - 00:24)

Salut,

darkstar2023 a écrit :
J'ai appliqué l'attribut css img{display:block;} pour y remédier, certes, mais je voudrais savoir pourquoi un tel comportement sur les navigateurs excepté IE6 qui lisait les images sans "marge" en dessous (çàd un rendu parfait ^^) - histoire de comprendre mieux certaines choses et éventuellement prévenir de prochains bugs.

Elle marche très bien la recherche de la section Apprendre.

darkstar2023 a écrit :
(PS/HS : IE6 me pose souvent moins de problèmes qu'IE7 ou FF2, mystère.)

Peut-être parce que IE6 a la particularité de corriger tout seul beaucoup de choses (par exemple le dépassement des flottants).

Un élément en ligne s'insère au fil du texte et se pose donc sur la ligne de texte, qui ne coïncide pas avec la partie basse du texte, afin que les jambages des lettres soient visibles (pense aux cahiers à grands carreaux que tu utilisais pendant ta scolarité ). Il est donc normal qu'une image (puisqu'il s'agit d'un élément en ligne) laisse une « marge » en dessous, qui correspond en fait à la zone dévolue aux jambages des lettres : ce comportement est conforme au standard CSS 2.1. Pour y remédier, on joue soit sur l'alignement vertical de l'image (par défaut, la propriété vertical-align a la valeur baseline, ce qui correspond à la fameuse ligne de texte qui laisse une zone en bas pour les jambages des lettres) soit sur la valeur de display, comme tu l'as fait.

Pour expliquer l'alignement voulu sans effort sous IE 6, il suffit de songer qu'il existe un mode de rendu moins connu que le mode Quirks : le mode presque standard (almost standards mode en anglais). Ce mode est équivalent au mode standard, à ceci près que les images sont affichées sans décalage en bas (notamment les images contenues dans une cellule de tableau ne contenant rien d'autre) ; autrement dit, c'est un résidu du mode Quirks. Sous Firefox, Opera, Safari, Chrome et Internet Explorer 8, le mode presque standard est déclenché par l'utilisation d'un doctype HTML 4.01 ou XHTML 1.0 en mode transitionnel. Les versions 6 et 7 d'IE, quand elles ne basculent pas en mode Quirks, utilisent le mode presque standard.

Pour compléter mon propos, tu peux consulter l'article Images, tableaux et décalages mystérieux, sur le Mozilla Developer Center.

Heyoan a écrit :
Salut,

Elle marche très bien la recherche de la section Apprendre.

Peut-être parce que IE6 a la particularité de corriger tout seul beaucoup de choses (par exemple le dépassement des flottants).

Ah, je n'ai pas vu désolé
En cherchant sur Google je trouvais des réponses similaires mais plus ou moins vagues.

Et merci pour tous ces éclairages clairs et précis. Ceci dit, j'ignorais l'existence du mode presque standard.
Modifié par darkstar2023 (23 Feb 2010 - 17:30)