Propriétés CSS inline-block compatible multi navigateur

22/02/2009

Ryan Doherty vient de nous pondre un hack permettant à la propriétés CSS inline-block d'être compatible sur la plupart des navigateurs actuels (Cross-Browser). Pour rappel cette propriété permet de donner un comportement de type "inline" à des éléments de type "block" .. pour l'exemple, c'est le comportement par défaut des images !

Par rapport a des éléments de type "block" mis en "float", inline-block permet un retour à la ligne systématique même avec des blocks de hauteur différentes (alors qu'en float un retour à la ligne vient buter sur le block de la ligne supérieur le plus haut) !

Des blocks de hauteurs différentes en "inline-block"

Des blocks de hauteurs différentes en "float"

On voit tout de suite les avantages de cette propriété !

Le hack

li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}

This is awesome
"http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg""lobster""75""75"

L'effet est ici appliqué aux éléments d'une liste et peut nécessiter quelques ajustements. Le rendu a été testé avec Firefox 2/3, Safari 3, Opera et IE 6/7

Moi il me tarde surtout d'avoir des navigateurs compatible CSS3 utilisé par 90% des internautes ! *Rêve utopiste*