Shulou(Shulou.com)06/03 Report--

This article mainly introduces the chrome, firefox, IE in the input input cursor dislocation how to do, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Detailed explanation of misplaced position of input input cursor in browser

Try to find solutions to the problems encountered at work, there are really some! Write it down for your own convenience and for others.

I have encountered a problem in the project before.

The input input box is simulated with a background image, setting the height of height and line-height to the same height so that the input text inside can be centered.

What happens under FF is that when you click input, the input cursor is actually as high as the height of input, but when you start typing text, the cursor becomes as high as the text

The cursor under chrome is as high as the height of input.

Under IE, the cursor is the same size as the text.

I never understood why it was like this. I didn't know why until I listened to the discussion of my classmates in the Louvre today.

The preliminary conclusions are as follows:

IE: whether the line has text or not, the cursor height is the same as font-size.

FF: when the line has text, the cursor height is the same as font-size. When the line has no text, the cursor height is the same as the height of input.

Chrome: when the line has no text, the cursor height is the same as line-height; when the line has text, the cursor height is from the top of the input to the bottom of the text (both cases are when line-height is set), if there is no line-height, it is the same as font-size.

Solution:

Setting a small height to the height of input and then filling it with padding can basically solve the problem of all browsers.

The code is as follows:

Input {

Height:16px

Padding:4px0px

Font-size:12px

}

Thank you for reading this article carefully. I hope the article "how to misplace the input input cursor in chrome, firefox and IE" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.