Comment obtenir un alignement cohérent des cases à cocher et des étiquettes dans tous les navigateurs ?

Comment aligner les cases à cocher et leurs étiquettes de manière cohérente entre les navigateurs

Cette question met en évidence les défis rencontrés pour aligner les cases à cocher et leurs étiquettes de manière cohérente dans différents navigateurs, en particulier Safari, Firefox , et IE. Le code fourni présente les standards HTML et CSS pour un formulaire contenant une case à cocher et son étiquette.

Une solution autrefois populaire impliquait l'utilisation de l'alignement vertical : une ligne de base sur l'entrée pour aligner correctement la case à cocher dans Safari. Cependant, cette approche entraînait souvent des désalignements dans Firefox et IE.

Après des tests et des ajustements approfondis, une solution différente a émergé, qui implique les propriétés CSS suivantes :

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

Cette solution aligne le case à cocher et son étiquette sur des lignes séparées et assure l'alignement vertical quel que soit le navigateur. Il indente également correctement le texte de l'étiquette après l'habillage. Avec cette approche, les cases à cocher et leurs étiquettes peuvent être alignées de manière cohérente sur plusieurs 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!