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 PHP on centos via yum

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

Tutorial on installing PHP on centos via yum

Code block highlighting can be copied and displayed js plug-in highlight.js + clipboard.js integration

Vue2.x configures routing navigation guards to implement user login and exit

Web Design Tutorial (4): About Materials and Expressions

UDP DUP timeout UPD port status detection code example

How to expand the disk partition for centos system

Several ways to implement "text overflow truncation and omission" with pure CSS

Pure JS method to export table to excel

JavaScript to achieve uniform animation effect

js implements a simple countdown

Recommend

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

Detailed explanation of the alternative implementation code of CSS vertical centering (unconventional)

MySQL full-text fuzzy search MATCH AGAINST method example

Summary of synchronization and mutual exclusion knowledge points between Linux threads

How to install MySQL database on Ubuntu

Using js to implement a number guessing game

Example of how to create a database name with special characters in MySQL

JavaScript to achieve a simple message board case

The MySQL server is running with the --read-only option so it cannot execute this statement

How to mount the CD to find the rpm package under Linux

Draw an iPhone based on CSS3

Example code of javascript select all/unselect all operation in html

Detailed explanation of the implementation of manual and automatic tracking of WeChat applet (Taro)

Centos7 mysql database installation and configuration tutorial

How to implement a single file component in JS