Home Web Front-end HTML Tutorial How to solve the problem of inconsistent cursor size display in the input input box

How to solve the problem of inconsistent cursor size display in the input input box

Jan 26, 2018 am 11:00 AM
input cursor size

这次给大家带来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;
Copy after login

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

相关阅读:

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

HTML的head头标签有哪些用法

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

The above is the detailed content of How to solve the problem of inconsistent cursor size display in the input input box. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1659
14
PHP Tutorial
1258
29
C# Tutorial
1232
24
Turn Easy T cursor movement between monitors on or off on Windows 11 Turn Easy T cursor movement between monitors on or off on Windows 11 Sep 30, 2023 pm 02:49 PM

Often, when using a dual monitor setup, the question arises of how to seamlessly move the cursor from one monitor to the other. It can be frustrating when your mouse cursor moves from one monitor to another without your control. Wouldn't it be great if Windows allowed you to easily switch from one monitor to another by default? Luckily, Windows 11 has a feature that does just that, and it doesn't require a lot of technical knowledge to perform it. What does easing cursor movement between monitors do? This feature helps prevent cursor drift when moving the mouse from one monitor to another. By default, this option is disabled. If you turn it on, the mouse

How to increase disk size in VirtualBox [Guide] How to increase disk size in VirtualBox [Guide] Mar 17, 2024 am 10:10 AM

We often encounter situations where the predefined disk size has no room for more data? If you need more virtual machine hard disk space at a later stage, you must expand the virtual hard disk and partitions. In this post, we will see how to increase disk size in VirtualBox. Increasing the disk size in VirtualBox It is important to note that you may want to back up your virtual hard disk files before performing these operations, as there is always the possibility of something going wrong. It is always a good practice to have backups. However, the process usually works fine, just make sure to shut down your machine before continuing. There are two ways to increase disk size in VirtualBox. Expand VirtualBox disk size using GUI using CL

How to solve the problem of black screen and cursor when booting up Windows 7 How to solve the problem of black screen and cursor when booting up Windows 7 Dec 30, 2023 pm 10:25 PM

The Windows 7 system has currently stopped updating, so if there is a problem, you can only solve it yourself. As shown below, there are many situations where the cursor goes black after booting the computer, and you need to troubleshoot one by one. If you don’t want to spend time troubleshooting, you can just reinstall the system. What to do if there is only a black screen with a cursor when Windows 7 starts up? The first solution: Restart the computer, and immediately press and hold the "F8" button on the keyboard after restarting. Then select "Last Known Good Configuration" in the advanced system menu. The second solution: press the shortcut key "CTRL+SHIFT+ESC" to see if the task manager can be brought up. If so, right-click to end Explorer.exe in the process and then create a new run Explorer.exe to try.

How to encapsulate input components and unified form data in vue3 How to encapsulate input components and unified form data in vue3 May 12, 2023 pm 03:58 PM

Preparation Use vuecreateexample to create a project. The parameters are roughly as follows: use native input. Native input is mainly value and change. The data needs to be synchronized when changing. App.tsx is as follows: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//When the input box changes, synchronize the data constonInput=;return( )=>({

How to implement laravel input hidden field How to implement laravel input hidden field Dec 12, 2022 am 10:07 AM

How to implement the laravel input hidden field: 1. Find and open the Blade template file; 2. Use the method_field method in the Blade template to create a hidden field. The creation syntax is "{{ method_field('DELETE') }}".

How to set the cursor color of Debian 11 Xfce terminal? How to set the cursor color of Debian 11 Xfce terminal? Jan 03, 2024 pm 02:36 PM

What is Xfce? Xfce is a free software that runs on Unix-like operating systems (such as Linux, FreeBSD and Solaris) and provides a lightweight desktop environment. How to adjust the cursor color in Debian11Xfce terminal? Let’s take a look at the specific operations with the editor. Click [Edit]-[Preferences]. Switch to the [Color] tab. Check Customize [Cursor Color] and click the color selection button on the right. After opening the palette, click to select the cursor color you want to set.

What to do if there is no cursor when clicking on the input box What to do if there is no cursor when clicking on the input box Nov 24, 2023 am 09:44 AM

Solutions for clicking the input box without a cursor: 1. Confirm the focus of the input box; 2. Clear the browser cache; 3. Update the browser; 4. Use JavaScript; 5. Check the hardware device; 6. Check the input box properties; 7. Debug JavaScript code; 8. Check other elements of the page; 9. Consider browser compatibility.

Detailed explanation of input box binding events in Vue documents Detailed explanation of input box binding events in Vue documents Jun 21, 2023 am 08:12 AM

Vue.js is a lightweight JavaScript framework that is easy to use, efficient and flexible. It is one of the most popular front-end frameworks currently. In Vue.js, input box binding events are a very common requirement. This article will introduce the input box binding events in the Vue document in detail. 1. Basic concepts In Vue.js, the input box binding event refers to binding the value of the input box to the data object of the Vue instance, thereby achieving two-way binding of input and response. In Vue.j

See all articles