Maison interface Web tutoriel HTML Comment résoudre le problème de l'affichage incohérent de la taille du curseur dans la zone de saisie

Comment résoudre le problème de l'affichage incohérent de la taille du curseur dans la zone de saisie

Jan 26, 2018 am 11:00 AM
input 光标 大小

这次给大家带来input输入框中的光标大小显示不一致应该怎么解决,解决input输入框中的光标大小显示不一致的注意事项有哪些,下面就是实战案例,一起来看一下。

input输入框中的光标大小显示不一致
ie7中和chrome的非常明显
先看看问题产生的原因:chrome浏览器对光标高度的设置原则为,当没有内容的时候光标的高度=input的line-height的值,当有内容时,光标从input的顶端到文字的底部。
OK,既然知道了原因,我们就相应才去一些措施。尝试了两种方法去做:。
方法1:将line-height的值设置为跟字体大小一致;如果高度达不到,用padding去撑;
方法2:对chrome不设置line-height,它会自动文字居中,对ie进行hack设置line-height的值以保证文字垂直居中;这里要注意一下,如果在reset的样式文件中有设置line-height等值,请进行line-height的重置,可以用line-height:normal。具体可以看看腾讯好莱坞页面的搜索框。
具体css:

height: 34px; 
font-size: 12px; 
line-height: normal; 
line-height: 34px\9;
Copier après la connexion

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML中head头结构应该如何使用

HTML的head头标签有哪些用法

怎样利用iframe让自己的网页可以显示天气

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Activer ou désactiver le mouvement du curseur Easy T entre les moniteurs sous Windows 11 Activer ou désactiver le mouvement du curseur Easy T entre les moniteurs sous Windows 11 Sep 30, 2023 pm 02:49 PM

Souvent, lors de l'utilisation d'une configuration à deux moniteurs, la question se pose de savoir comment déplacer le curseur de manière transparente d'un moniteur à l'autre. Cela peut être frustrant lorsque le curseur de votre souris se déplace d'un moniteur à un autre sans votre contrôle. Ne serait-il pas formidable si Windows vous permettait de passer facilement d'un moniteur à un autre par défaut ? Heureusement, Windows 11 dispose d'une fonctionnalité qui fait exactement cela, et ne nécessite pas beaucoup de connaissances techniques pour l'exécuter. À quoi sert la facilitation du mouvement du curseur entre les moniteurs ? Cette fonctionnalité permet d'éviter la dérive du curseur lors du déplacement de la souris d'un moniteur à un autre. Par défaut, cette option est désactivée. Si vous l'allumez, la souris

Comment augmenter la taille du disque dans VirtualBox [Guide] Comment augmenter la taille du disque dans VirtualBox [Guide] Mar 17, 2024 am 10:10 AM

Nous rencontrons souvent des situations où la taille de disque prédéfinie n'a pas de place pour plus de données ? Si vous avez besoin de plus d'espace disque sur la machine virtuelle ultérieurement, vous devez étendre le disque dur virtuel et les partitions. Dans cet article, nous verrons comment augmenter la taille du disque dans VirtualBox. Augmenter la taille du disque dans VirtualBox Il est important de noter que vous souhaiterez peut-être sauvegarder les fichiers de votre disque dur virtuel avant d'effectuer ces opérations, car il y a toujours la possibilité que quelque chose se passe mal. C'est toujours une bonne pratique d'avoir des sauvegardes. Cependant, le processus fonctionne généralement correctement, assurez-vous simplement d'éteindre votre ordinateur avant de continuer. Il existe deux façons d'augmenter la taille du disque dans VirtualBox. Augmentez la taille du disque VirtualBox à l'aide de l'interface graphique à l'aide de CL

Comment encapsuler les composants d'entrée et les données de formulaire unifié dans vue3 Comment encapsuler les composants d'entrée et les données de formulaire unifié dans vue3 May 12, 2023 pm 03:58 PM

Préparation Utilisez vuecreateexample pour créer un projet. Les paramètres sont à peu près les suivants : utiliser l'entrée native est principalement la valeur et le changement. Les données doivent être synchronisées lors du changement. App.tsx est le suivant : import{ref}from'vue';exportdefault{setup(){//username est la donnée constusername=ref('Zhang San');//Lorsque la zone de saisie change, synchronisez les données constonInput =;retour( )=>({

Comment résoudre le problème de l'apparition d'un écran et d'un curseur noirs au démarrage de Windows 7 Comment résoudre le problème de l'apparition d'un écran et d'un curseur noirs au démarrage de Windows 7 Dec 30, 2023 pm 10:25 PM

Le système Windows 7 a actuellement arrêté la mise à jour, donc s'il y a un problème, vous ne pouvez le résoudre que vous-même. Comme le montre l'image ci-dessous, il existe de nombreuses situations dans lesquelles le curseur devient noir après le démarrage de l'ordinateur et vous devez résoudre les problèmes un par un. Si vous ne voulez pas passer du temps à résoudre les problèmes, vous pouvez simplement réinstaller le système. Que faire s'il n'y a qu'un écran noir avec un curseur au démarrage de Windows 7 ? La première solution : Redémarrez l'ordinateur, et maintenez immédiatement la touche "F8" du clavier après le redémarrage. Sélectionnez ensuite « Dernière bonne configuration connue » dans le menu système avancé. La deuxième solution : appuyez sur la touche de raccourci "CTRL+SHIFT+ESC" pour voir si le gestionnaire de tâches peut être affiché. Si tel est le cas, cliquez avec le bouton droit pour terminer Explorer.exe dans le processus, puis créez une nouvelle exécution de Explorer.exe. essayer.

Comment implémenter le champ caché d'entrée Laravel Comment implémenter le champ caché d'entrée Laravel Dec 12, 2022 am 10:07 AM

Comment implémenter le champ caché d'entrée Laravel : 1. Recherchez et ouvrez le fichier de modèle Blade ; 2. Utilisez la méthode method_field dans le modèle Blade pour créer un champ masqué. La syntaxe de création est "{{ method_field('DELETE') }}. ".

Comment définir la couleur du curseur du terminal Debian 11 Xfce ? Comment définir la couleur du curseur du terminal Debian 11 Xfce ? Jan 03, 2024 pm 02:36 PM

Qu’est-ce que Xfce ? Xfce est un logiciel gratuit qui fonctionne sur des systèmes d'exploitation de type Unix (tels que Linux, FreeBSD et Solaris) et fournit un environnement de bureau léger. Comment ajuster la couleur du curseur dans le terminal Debian11Xfce ? Jetons un coup d'œil aux opérations spécifiques avec l'éditeur. Cliquez sur [Modifier]-[Préférences]. Passez à l'onglet [Couleur]. Cochez Personnaliser [Couleur du curseur] et cliquez sur le bouton de sélection de couleur à droite. Après avoir ouvert la palette, cliquez pour sélectionner la couleur du curseur que vous souhaitez définir.

Que faire s'il n'y a pas de curseur lorsque vous cliquez sur la zone de saisie Que faire s'il n'y a pas de curseur lorsque vous cliquez sur la zone de saisie Nov 24, 2023 am 09:44 AM

Solutions pour cliquer sur la zone de saisie sans curseur : 1. Confirmez le focus de la zone de saisie ; 2. Effacez le cache du navigateur 3. Mettez à jour le navigateur 4. Utilisez JavaScript 5. Vérifiez le périphérique matériel ; propriétés de la boîte ; 7. Débogage du code JavaScript ; 8. Vérifiez les autres éléments de la page ;

Explication détaillée des événements de liaison de zone de saisie dans les documents Vue Explication détaillée des événements de liaison de zone de saisie dans les documents Vue Jun 21, 2023 am 08:12 AM

Vue.js est un framework JavaScript léger, facile à utiliser, efficace et flexible. Il s'agit actuellement de l'un des frameworks front-end les plus populaires. Dans Vue.js, les événements de liaison de zone de saisie sont une exigence très courante. Cet article présentera en détail les événements de liaison de zone de saisie dans le document Vue. 1. Concepts de base Dans Vue.js, l'événement de liaison de la zone de saisie fait référence à la liaison de la valeur de la zone de saisie à l'objet de données de l'instance Vue, réalisant ainsi une liaison bidirectionnelle de l'entrée et de la réponse. Dans Vue.j

See all articles