Display:inline-block sur tous les navigateurs actuelles

Display:inline-block sur tous les navigateurs actuelles

La propriété CSS display:inline-block est une des propriétés les plus intéressantes dans la mise au point de mise en page moderne. Elle confère une structure de bloc à un élément en ligne.

Cependant, la compatibilité de cette propriété est plutôt mauvaise, IE 6 (et son grand frère IE7) ne l’interprète uniquement sur les balises qui sont par défaut en ligne. Firefox ne n’implémente qu’à partir de la version 3. Webkit et Presto pas de problème particulier. Alors comment faire pour l’utiliser lorsque l’on doit faire un site compatible avec Internet Explorer version 6 et 7 ?

Voici un hack qui permet à la propriété CSS inline-block d’être compatible avec la plupart des navigateurs actuellement en circulation. Cette propriété permet non seulement d’aligner une liste d’éléments (un classique du CSS), mais en plus de considérer chaque élément comme un “bloc” et ainsi aller à la ligne lorsque celui-ci ne tient pas sur l’espace demandé.

Cas d'Internet Explorer

On a deja vu qui sont en positionnement inline par défault peuvent avoir la propriété inline-block, il y a un autre cas de figure où cela est possible, il faut que la balise vérifie 2 conditions :

Donc, on peut simuler pour IE 6 et 7, inline-block en définissant le style suivant :

div .inline-block {
     display:inline; zoom:1;
}

Pour rappel, la propriété zoom est une propriété propre à IE qui à comme effet de bord de confèrer la propriété hasLayout au bloc.

comments powered by Disqus

Voir aussi

La propriété CSS word-wrap

La propriété CSS word-wrap

La propriété css : word-wrap Inventé par Microsoft, la propriété css word-wrap. Elle permet de forcer le passage à la ligne pour les mots trop long. …

Style interprété par tous les navigateurs sauf IE 6

Style interprété par tous les navigateurs sauf IE 6

Les commentaires conditionnels permettent d’interpréter du code CSS en fonction de la version d’internet explorer. Pourtant, il arrive …

Problème de reverse proxy dans l'admin de SPIP

Problème de reverse proxy dans l'admin de SPIP

Si vous utilisez un reverse proxy, l’admnistration de SPIP se basera sur l’adresse présente dans la variable SERVER_NAME du tableaux super …

Plugin Wordpress de correction des erreurs de grammaires

Plugin Wordpress de correction des erreurs de grammaires

Bien que de nombreux navigateurs disposent par défaut de correcteur orthographique, les erreurs de grammaires passent entre les mailles du filet. Le …

A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019