Revenir à la liste des articles développement web
Une solution js élégante pour l'espacement aléatoire créé par le positionnement css 'inline-block'
Voici maintenant un moment depuis que le positionnement css inline-block est apparu et est implémenté par les nouveaux navigateurs (IE8 inclus).
Allons droit au but: le positionnement inline-block présente un souci de positionnement dès que l'on veut positionner des éléments au pixel près!
Plusieurs cas de figure peuvent se présenter, selon le type du moteur de rendu javascript du navigateur utilisé:
Cas Internet explorer:
IE6 et IE 7: Ont uniquement besoin d'activer le comportement "conteneur" de l'élément positionné en 'inline-block', pour cela il existe plusieurs méthodes (google va très vite vous aider). Personnellement, j'utilise:
[style]
monElementInlineBlock
{
display: inline;
zoom: 1;
}
[/style].
A la fin, IE6/IE7 ne posent aucun problème une fois le comportement 'inline-block' activé!
Pour IE8 et les autres principaux navigateurs, la marge créé entre chaque block mis cote-à-cote et stylé en 'inline-block' reste assez aléatoire, vu qu'elle (la marge) représente exactement celle (de base) existant entre deux éléments de type 'inline'. J'ai essayé d'adopter quelques solutions au départ, qui consistaient en la disposition des éléments en question de façon à ce qu'ils soient collés l'un à l'autre, ou bien encore, qu'ils soient consolidés par une balise commentaire vide. Mais il s'avère très rapidement que cette solution devient lourde voire impossible à maintenir sur des sites dépassant la dizaine de pages. J'ai donc fini par me résigner à développer deux scripts utilitaires permettant respectivement de palier au "fameux" espacement créé par les navigateurs récents.
A noter cependant que ces scripts sont à utiliser et à appeler une fois le DOM chargé en mémoire. Les voici: