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

22/02/2009
WebDev et Design Allez aux commentaires

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"

inline-block-479

Des blocks de hauteurs différentes en "float"

inline-block-4791

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

Le hack

<style>
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;
}
</style>

<ul>
        <li>
                <div>
                        <h4>This is awesome</h4>
                        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
                </div>
        </li>
        <li>
                <!-- etc ... -->
        </li>
</ul>

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*

-----

Articles relatifs

  • Bonsoir

    Je n’ai qu’un mot : EX-CE-LLENT !!!

    L’inline-block était jusqu’à présent une propriété qui manquait fichtrement à mes projets du fait de sa non compatibilité cross-browsers.

    Je vais tester au plus vite de hack 🙂

  • k-ny

    @Cédric Attention qu’il y a quelques contraintes tout de même 😉

  • en tous les cas, l’utilité d’un tel hack répond aux besoins d’un grand nombre de bloggueurs en tout genre

  • k-ny

    @bernard C’est clair 😉

  • Pingback: Spirit of wordpress()

  • Super, je cherchais justement un truc dans le style….
    A mort IE !!

  • Bonjour et merci pour cet article ! Pédagogique et concis 🙂

  • Nouveau venu dans le monde de WP (et franchement conquis) , je tombe sur ce site regorgeant d’infos , et cerise sur le gateau , l’auteur semble apprecier l’inline-block « cross browser » … j’aime 🙂 .

    Cette technique , permettant des centrages horizontaux entre elements de tout types est applicable dans IE depuis qu’il est sensible au haslayout … autant dire qu’elle n’est pas nouvelle , souvent incomprise et délicate a mettre en oeuvre et a reproduire dans les autres navigateur de façon plus « standard » .

    La regle -moz-inline-stack pour firefoxe 2 et inferieur , soufre d’un défaut … enfin pas vraiment , car elle stacks(empile) bien les elements les uns sur les autres , un élément enfant tampon supplémentaire déclaré en display block , servira de parent aux contenus en éliminant ce défaut .

    Adieux les tableaux de mise en page ? … non , mais le display : table; pourra enfin etre utilisé a bon escient (quasi jamais en fait) .

    Le display: inline-block; peut enfin intervenir dans les techniques de mise en forme , La disparition de IE7 , 6 et FF2 en fera une valeur sure d’ici peu 🙂 , du moins les alternatives , pour beaucoup complexes (ou assimilé a des bidouilles incompréhensibles) , a mettre en oeuvre n’auront plus lieu d’être , le reflexe « tableau » va pouvoir s’estomper peu a peu 🙂 au profit d’un inline-block insouciant du type d’élèment a styler .

    Enfin , bref , cet article me plait bien même si je trouve toujours que l’info est incomplete ( http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/#comment-189336 )

    j’ai une énième fois tenté d’en expliquer le fonctionnement ici : (voir site mis en lien sous

    Peut-être que ceci peut avoir encore un peu d’intérêt , de vielles version d’IE perdurent encore 🙂

    …

    Merci pour ce site , petite pépite à « bookmarker » ou mine d’or a explorer … pour un nouveau venu dans wp_ .

    GC

  • Pingback: 10 astonishing CSS hacks and techniques()

  • Pingback: 10 astonishing CSS hacks and techniques | huibit05.com()

  • Naoki

    Pour info, il y a un vertical-align:top qui a disparu ici par rapport à l’article original. Peut-être car il a été mis à jour depuis, mais sans celle-ci, perso j’avais des problèmes sous FF.

  • Julien

    @Naoki
    Bien vu ! Effectivement l’article original à été mis à jour, certainement en même temps qu’une nouvelle version de Firefox. Bref c’est corrigé, merci pour ta vigilance 😉

  • Pingback: 10大跨浏览器的CSS hack技术与应用 « SonicHTML – 高品质 HTML+CSS 服务()

  • Pingback: 10 Astonishing CSS Hacks And Techniques « HUE Designer()

  • benoit

    Merci pour c’est trés astucieux !

  • Démonarc

    Je suis ravi d’apprendre que le inline-block fonctionne sur les version IE 6 et 7.
    Je vais pouvoir en mettre à tout va sur mes sites sans problème de rétrocompatibilité.
    Surtout depuis que google a annoncé qu’il allait arrêter la prise en charge des plus vieilles versions de IE.