Solution to input cursor misalignment in Chrome, Firefox, and IE

Detailed explanation of the misplacement of the input cursor in the browser <br />I encountered a problem at work and tried to find a solution, and there really was one! Write it down for your own convenience and for the convenience of others.

I encountered a problem in the project before.
The input box is simulated with a background image, and the height is set to the same height as the line-height so that the input text inside can be centered.
What happens in FF is that when you click on input, the input cursor is actually the same height as the input, but when you start typing text, the cursor becomes the same height as the text.
In Chrome, the cursor is as high as the input height.
In IE, the cursor is the same size as the text.
I never understood why this was the case, but today after listening to a discussion with my classmates at the Louvre, I finally understood the reason.

The preliminary conclusions are as follows:
IE: Regardless of whether there is text on the line, the cursor height is consistent with the font-size.
FF: When there is text on the line, the cursor height is consistent with the font-size. When there is no text on the line, the cursor height is the same as the input height.
Chrome: When there is no text on the line, the cursor height is the same as the line-height; when there is text on the line, the cursor height is from the top of the input to the bottom of the text (both cases are when the line-height is set). If there is no line-height, it is the same as the font-size.

Solution:
Setting a smaller height for the input and then using padding to fill it can basically solve the problem for all browsers

Copy code

The code is as follows:

input{
height:16px;
padding:4px0px;
font-size:12px;
}

<<: Right align multiple elements in the same row under div in css

>>: Linux RabbitMQ cluster construction process diagram

Tutorial on installing Odoo14 from source code on Ubuntu 18.04

Solution to the problem that Alibaba Cloud host cannot access the website using IP (solved by configuring security group rules)

I just bought an Alibaba Cloud host and couldn’t ...

Solution to input cursor misalignment in Chrome, Firefox, and IE

Tutorial on installing Odoo14 from source code on Ubuntu 18.04

Deep understanding of the use of ::before/:before and ::after/:after

How to use MySQL common functions to process JSON

How to use & and nohup in the background of Linux

Linux kernel device driver virtual file system notes

Database query which object contains which field method statement

A detailed introduction to the redesign of the Weibo component on the website (pictures and text)

6 tips for web design

Docker stop stops/remove deletes all containers

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Recommend

How to Change Colors and Themes in Vim on Linux

How to modify the default storage engine in MySQL

The difference between HTML iframe and frameset_PowerNode Java Academy

Solution to the problem that Alibaba Cloud host cannot access the website using IP (solved by configuring security group rules)

An audio-visual Linux distribution that appeals to audiophiles

Vue v-model related knowledge summary

How to change the default character set of MySQL to utf8 on MAC

Detailed explanation of TS object spread operator and rest operator

Why is UTF-8 not recommended in MySQL?

Have you really learned MySQL connection query?

Compilation process analysis of Remax framework for writing small programs using React (recommended)

MySQL 8.0.12 installation graphic tutorial

Detailed explanation of three ways to set borders in HTML

MySql grouping and randomly getting one piece of data from each group

Vue implements infinite loading waterfall flow