Solution à l'affichage incohérent de la taille du curseur dans la zone de saisie_HTML/Xhtml_Production de pages Web

La taille du curseur dans la zone de saisie s'affiche de manière incohérente

C'est très évident dans IE7 et Chrome

Regardons d'abord la cause du problème : le navigateur Chrome définit la hauteur du curseur comme suit : lorsqu'il n'y a pas de contenu Lorsque la hauteur du curseur = la valeur de la hauteur de ligne de la saisie, lorsqu'il y a du contenu, le curseur va du haut de la saisie vers le bas du texte.

OK, maintenant que nous connaissons la raison, nous allons prendre quelques mesures en conséquence. J'ai essayé deux façons de le faire :.

Méthode 1 : définissez la valeur de la hauteur de ligne pour qu'elle soit cohérente avec la taille de la police ; si la hauteur ne peut pas être atteinte, utilisez le remplissage pour la prendre en charge

Méthode 2 : ne définissez pas la hauteur de ligne ; height pour Chrome. Il centrera automatiquement le texte. Hack IE pour définir la valeur de line-height pour garantir que le texte est centré verticalement si des valeurs telles que line-height sont définies dans le style de réinitialisation. fichier, veuillez réinitialiser line-height , vous pouvez utiliser line-height:normal. Pour plus de détails, vous pouvez consulter le champ de recherche sur la page Hollywood de Tencent.

CSS spécifique :

Copier le code

Le code est le suivant :

hauteur : 34px ;
taille de la police : 12px ;
hauteur de la ligne : normale
hauteur de la ligne : 34px9 ;