Les intégristes

Cette propriété qui est très peu utilisée pour des raisons de compatibilité navigateur est néanmoins intéressante. Elle permet en effet d’appliquer des styles de type “block” à un élément ayant un comportement de type “inline”, comme par exemple, une largeur, une hauteur, des marges, etc. Ce qui veut dire que dans certains cas, il est possible de structurer des parties de pages sans avoir recours à la propriété float (left, right) ou position (relative, absolute).

Bien qu’incomplètement prise en compte par les différents navigateur, il est possible de l’utiliser avec quelques connaissances supplémentaires, démonstration :

Prenons l’exemple simple d’un formulaire d’inscription, où il faut aligner des label à 150px du bord d’input de type texte :

Pour le code html suivant :

<form action="" method="post" id="inscription">
<fieldset>
<label for="prenom">Prénom <em>*</em></label>
<input type="text" id="prenom" /><br />
<label for="nom">Nom <em>*</em></label>
<input type="text" id="nom" /><br />
<label for="email">Email <em>*</em></label>
<input type="text" id="email" /><br />
<label for="password">Mot de passe <em>*</em></label>
<input type="password" id="password" /><br />
<label for="confirm-password">Mot de passe <em>*</em></label>
<input type="password" id="password" /><br />
<input type="submit" value="valider" class="input-submit" />
</fieldset>
</form>

Je définis le styles des base, auxquels je vais ajouter (en gras) la propriété inline-block et les styles qui vont avec :

#inscription fieldset{border:none;}
#inscription label{display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}

Première constatation : ça fonctionne sur la plupart des navigateurs (IE6, IE7, Opera, Safari) mais pas sur les versions de Firefox antérieures à Firefox 3…

On ajoute alors la propriété display:-moz-inline-box; pour Firefox 2 et les versions antérieures, mais attention, il faut la placer avant display:inline-block, sinon ça ne fonctionne plus pour Internet Explorer et Firefox prend en compte display:-moz-inline-box; au lieu de prendre en compte display:inline-block.

#inscription fieldset{border:none;}
#inscription label{display:-moz-inline-box;display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}

Dans certains cas j’ai constaté des problème de layout avec Internet Explorer, dans ce cas ajouter la propriété display:inline dans une déclaration séparée :

#inscription fieldset{border:none;}
#inscription label{display:-moz-inline-box;display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}
#IE #inscription label,
#IE #inscription .input-submit{display:inline;}

On obtient le résultat suivant, un formulaire structuré sans tableau, sans éléments flottant ou positionnés en dehors du flux html :

Seule limitation constatée, les éléments mis en inline-block dans Firefox se comporte comme ayant une propriété white-space:nowrap appliquée, il n’est pas possible d’avoir des textes sur plusieurs lignes…