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