inline-block : tout navigateurs

La règle display:inline-block; peut sembler avantageuse la ou un élément de typeinline ou block demande a être stylé d'une façon particulière sans faire usage d'un positionnement en absolue ou en flottement

... Depuis l'avènement de Firefox 3 et de Internet Explorer 8 (bientôt suivie de la version 9 ) , cette règle revient sur le devant de la scène ...

Quels interêts ?

En fait , Une fois cette règle établie , il devient possible d'aligner verticalement chacun de ces éléments , de les centrer dans leur parents avec un text-align:center; , de les dimensionner comme des éléments flottants , de jouer avec white-space ou les directions d'affichages , etc ...

Chacun de ces éléments se comporte comme une balise Image inline , capable de contenir des element de type block qui afficherait un contenu (X)HTML.

Mais !

Pourtant les versions de I.E. et FF ne semblent pas toutes l'implémenter , en tout ou partie .

Pourquoi pas ? , comment régler ces défauts ?

Je vous propose de voir quelques possibilités .

Quelques exemples de codes sur ce site mettent en avant son usage et la façon de mettre au diapason I.E. (lte 7) et FF (lte 2)

FF (lte 2)

2 Options sont envisageables :

Le display:table-cell; et on la sert a tout les navigateurs , sauf I.E. Cette options est réputée bricole ou bidouille car elle détourne une règle de son usage .

Une autre règle propriétaire existe : display:-moz-inline-stack; , elle nécessite l'ajout d'un élément tampon pour la rendre utilisable sans ses effets secondaires d'empilements, il ne s'agit plus d'un détournement bricolo-astucieux mais d'une correction pertinente. De plus cette correction aura l'avantage de contenir les différences de certaines règles de style dans I.E. (white-space en particulier ).

Pour appliquer cette règle alternative, il suffit simplement de la mettre en amont , Les différentes versions de Firefox appliquerons cette règle .

Dans les versions de Firefox 3 et plus cette régle sera écrasée .

exemple: html (avec l'élément correcteur)

<div> <div class="tampon"> Contenus </div> </div>

exemple: css (avec l'élément correcteur)
div { display:-moz-inline-stack;/* FF lte 2 */ display:inline-block;/* FF gte 3 , et les autres navigateurs (excepté IE) */ } /* regle pour l'élèment tampon*/ div.tampon { display:block; }

IE (lte 7)

Tout d'abord , la règle : display:inline-block; confère le layout dans IE.(rappel)

Sur un élément de type block , elle n'aura donc que cet effet , cet élément conservera ces caractéristiques : l'effet attendu n'est pas au rendez-vous .

Pour obtenir l'effet recherché , il faudra passer cet élément de type block en type inline au préalable puis de lui conféré le layout avec zoom:1;.

Nous n'auront pas d'autres choix que de nous servir des C.C en ciblant les versions 7 et inférieurs de I.E.

exemple:

<!--[if lte IE 7 ]> <style>div { display:inline; zoom:1; } </style> <![endif]-->

Exemple de démonstration

2élements de type block
Centrés horizontalement
Centrés verticalement
de largeur imposée
avec une bordure
Cela devrait suffire (sourire)
Contenu quelconque

Contenu quelconque

_.-:-._

Contenu quelconque

En Fin

En Juin 2010, il n'est plus vraiment necessaire de se soucier de firefoxe 2 , IE6 est en voie de disparition , les mise a jour de windows ont en grande partie reduit la présence de IE7 , la regle display:inline-block est devenu réellement utilisable

.

Une fois que le comportement final de ce type de formatage (tout type d'élément confondu ) compris , et la technique relativement simple assimilée : des menus horizontaux centré , des liste d'images et leur légendes au-dessous cote a cotes , ou des portions complete de page en rang d'oignons , ne seront plus pour vous que formalités de styles .

Ecrire un commentaire




Quelle est la quatrième lettre du mot xcwnh ?