Comment aligner les cases à cocher (checkboxes) et leur label quel que soit le navigateur ?
Aligner les cases à cocher de manière identique pour tous les navigateurs est problématique. En effet, les rendus diffèrent entre Firefox, Internet Explorer ou Safari...
Aligner les cases à cocher de manière identique pour tous les navigateurs est un casse-tête. En effet, les rendus sont différents selon que l'on utilise Firefox, Internet Explorer ou encore Safari mais également selon la version d'Internet Explorer utilisée (voir aussi le tutoriel : Comment utiliser jQuery pour vérifier la propriété checked d'une case à cocher ?).
Afin d'atténuer les différences entre navigateurs, il est nécessaire de remettre à zéro les propriétés des éléments. Cela consiste à fixer à zéro la valeur des marges et bordures, de fixer la taille de police à 100%, de préciser que la police est la même que celle de l'élément parent est de fixer la propriété vertical-align à la valeur baseline, pour toutes les balises HTML.
Pour assurer la compatibilité avec Internet Explorer 6 et 7, le hack *overflow est une propriété seulement comprise par ces deux navigateurs qui aligne la case à cocher. Pour les autres navigateurs, l'alignement par le bas est la propriété CSS la mieux comprise par tous les navigateurs. Il faut ensuite fixer la position de la case à cocher à relative et les deux éléments sont alignés.
Les autres propriétés (indentation du texte, marges, alignement, dimensions) sont à régler en fonction de la police utilisée. Exemple de code :
<form>
<div>
<label><input type=checkbox /> Label text</label>
</div>
</form>
<style type=text/css>
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
</style>