Les projets récents impliquent une grande partie de la production de formulaires, en particulier les cases à cocher et les cases radio. Cependant, pendant le processus de développement frontal, il a été constaté que les cases à cocher unique (complexes) et le texte rapide derrière eux ne pouvaient pas être alignés sans aucun paramètre, et il y avait une grande différence entre Firefox et IE. Même si elle est verticale: le milieu est réglé, il ne peut toujours pas être parfaitement aligné. Comme indiqué dans la figure ci-dessous:
J'ai donc vérifié certains sites Web en ligne et j'ai constaté que ce problème est courant, comme le montre la figure ci-dessous (FF3.5):
Dans de nombreux sites Web, il y a un problème que les éléments de forme ne peuvent pas être alignés sur le texte rapide. J'ai donc l'intention d'étudier ce problème. Tout d'abord, j'ai recherché l'article "Tout le monde dit tout le monde à l'alignement vertical" de Wheatlee senior. Dans son article, Wheatlee a mentionné plusieurs points clés sur le centrage vertical:
1. Lorsque Vertical-Align: Middle, le centre de l'élément est aligné avec le centre des éléments environnants.
2. La définition du centre ici est: l'image est bien sûr la moitié de la hauteur, et le texte doit être augmenté de 0,5ex en fonction de la ligne de base, c'est-à-dire le centre de la lettre minuscule x. Cependant, de nombreux navigateurs définissent souvent l'unité d'Ex comme 0.5EM, il n'est donc pas nécessairement le centre de X (si vous ne comprenez pas les noms tels que la ligne de base, veuillez d'abord lire l'article de Wheatlee)
Selon cette idée, par rapport aux problèmes que j'ai rencontrés, la première chose qui vous vient à l'esprit est de vérifier si le navigateur utilise les mêmes règles pour les cases et les images à rendre (si vous traitez les cases comme une image carrée). J'ai donc écrit le code suivant:
<style>
corps {taille de police: 12px;}
</ style>
<Style d'entrée = Adigne vertical: Middle; name = Test Type = Checkbox>
<Style IMG = Adigne vertical: Middle; src = testpic.gif />
Tester le texte
Le testpic.gif dans le code est une image noire avec exactement la même taille que la case. L'affichage suivant sous FF3.5:
Page précédente 1 2 3 4 Page suivante Lire le texte intégral