Comment puis-je obtenir un alignement cohérent des cases à cocher et des étiquettes dans différents navigateurs ?

Aligner les cases à cocher et les étiquettes de manière cohérente dans tous les navigateurs

Aligner correctement les cases à cocher et leurs étiquettes dans différents navigateurs peut être une tâche ardue. Pour obtenir une cohérence entre les navigateurs, il est essentiel de comprendre les nuances du moteur de rendu de chaque navigateur.

Dans le HTML standard fourni :

<label><input type="checkbox" /> Label text</label>

La feuille de style de réinitialisation d'Eric Meyer est généralement appliquée, en minimisant remplacements spécifiques au navigateur. Cependant, malgré son omniprésence, l'alignement des cases à cocher et des étiquettes sur tous les navigateurs reste un défi.

Solution d'alignement entre navigateurs

Après une expérimentation approfondie, une solution a émergé qui répond les exigences suivantes :

• Les cases à cocher et les étiquettes sont séparées lignes.
• L'alignement vertical est cohérent dans tous les navigateurs.
• Le texte de l'étiquette s'enroule sans s'étendre sous la case à cocher.

Le code CSS utilisé est le suivant :

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

En définissant l'étiquette pour qu'elle s'affiche sous forme de bloc et en appliquant un remplissage et des retraits de texte appropriés, un étiquetage cohérent est obtenu. L'élément d'entrée est ensuite positionné dans l'étiquette à l'aide d'un alignement vertical et d'un positionnement relatif, garantissant ainsi l'alignement sur tous les principaux navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!