élément inline-block décalé verticalement

Saaaaalut !

Aujourd'hui je suis tombé sur un petit problème d'alignement vertical de mes puces (double fleche orange en image de fond) sur Firefox.

Contexte : sur une même page j'utilise à divers endroits ma classe "link-1" sur une balise <a>

.link-1 {
    background: url("../img/skin/sprites-no-alpha.png") no-repeat 0 6px transparent;
    border: 1px solid red;
    display: inline-block;
    padding-left: 9px;
}

et pour ceux que ça intéresse j'ai cet héritage :

* {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

Problème : il existe un décalage vertical qui positionne la puce un pixel plus bas sur certains éléments.

Oui, ce n'est qu'un pixel mais j'aimerai au moins que ce soit partout pareil, aligné avec la baseline du texte.

Je pense avoir trouvé la cause et je vais tenter d'expliquer avec ce screenshot garni de quelques mesures aux couleurs chatoyantes (oh regardez comme ça chatoye).

http://www.micromix.fr/inline-block/decalage-inline-block.png

Les paragraphes ont chacun une typo de 13px et un interlignage identique de 15px (en fait c'est en unité em mais "osef lol").

le html ressemble à ça

<p class="text text-1 din">Localisez les sites [...] informations...</p>
<a class="link-1" href="#">Lire la suite</a>

donc un lien après un paragraphe déclaré inline.


Je me suis aperçu en faisant varier l'interlignage de ces paragraphes, qu'a tour de rôle la troisième ligne de l'un ou de l'autre avait 1px manquant en interlignage et n'affectait pas l'alignement des textes sur leurs baseline (comme on peut le voir dans le screenshot) mais affectait bien sûr l'element ".link-1" inline-block (bordure rouge).

Voila, donc j'ai appliqué un line-height de 15px à mon élément ".link-1" inline-block.

Je ne suis pas sur qu'une même valeur de line-height soit valable dans tous les cas mais dans mon projet ça fonctionne car ce n'est pas trop variable de ce côté là..


Je ne cherche pas spécialement une solution, c'était + pour partager cette nouvelle mésaventure typographique avec vous mais j'aimerai bien entendre quelques avis
Modifié par KZS (13 Sep 2011 - 19:02)

Bonjour,

j'allais te dire de fixer l'interlignage ou que les tailles de police étaient pas les mêmes mais c'est pas ça nous dis-tu
As-tu constaté la même chose avec un autre navigateur ? Entre Firefox, Chrome et un IE par exemple.
Si tu colles des span dans le texte et sur ces span ta puce ?
Si tu ajoutes à la main 6px dans ton image et que tu fixes à "left top" son positionnement ?

edit: BORDER ? Et avec outline qui ne modifie pas ta boîte ?
Modifié par Felipe (13 Sep 2011 - 19:18)

Salut,

Felipe a écrit :
j'allais te dire de fixer l'interlignage ou que les tailles de police étaient pas les mêmes mais c'est pas ça nous dis-tu

oui c'est bien le même interlignage. A vrai dire, l'interlignage irrégulier est une chose que j'avais déjà remarquée il y a quelques années. Pour moi c'était admis que le rendu ne pouvait pas se faire au dixième de pixel sur un interlignage défini, alors le navigateur répartit comme il peut chaque ligne. Certaines ne seront alors pas à la même distance d'une autre à un pixel près.
Mais je n'avais pas encore beaucoup utilisé "display:inline-block" du fait de son maigre support (vu les contraintes clients en agence, blablabla...) et je ne m'attendais pas à ce que le décalage de l'element se fasse de manière dépendante du texte qu'il contient. Car comme démontré, le texte lui est bien aligné sur la baseline comme demandé en CSS.

Felipe a écrit :
As-tu constaté la même chose avec un autre navigateur ? Entre Firefox, Chrome et un IE par exemple?

Je n'ai pas encore testé sur d'autres navigateurs.

Felipe a écrit :
Si tu colles des span dans le texte et sur ces span ta puce ?

il s'agit d'une balise <a> qui est déclarée en inline-block, j'aurai le même rendu avec un <span> ou n'importe quelle balise. Je n'ai pas laissé en inline car parfois cette puce contient du texte qui passe sur deux lignes et je ne voulais pas que la seconde ligne passe sous la puce.

Felipe a écrit :
Si tu ajoutes à la main 6px dans ton image et que tu fixes à &quot;left top&quot; son positionnement ?

Euh j'ai pas compris ça

Felipe a écrit :
edit: BORDER ? Et avec outline qui ne modifie pas ta boîte ?

L'effet est le même avec ou sans border, j'ai juste mis ça pour qu'on voit effectivement le contour de l'élément <a>

Merci pour ton avis
Modifié par KZS (14 Sep 2011 - 15:01)