Solution to the inconsistent cursor size display in the input input box_HTML/Xhtml_Web page production

The cursor size in the input input box is displayed inconsistently

It is very obvious in IE7 and Chrome

Let’s first look at the cause of the problem: The chrome browser sets the cursor height as follows: when there is no content When the height of the cursor = the value of line-height of the input, when there is content, the cursor goes from the top of the input to the bottom of the text.

OK, now that we know the reason, we will take some measures accordingly. Tried two ways to do it:.

Method 1: Set the line-height value to be consistent with the font size; if the height cannot be reached, use padding to support it;

Method 2: Do not set line-height for chrome. It will automatically center the text. Hack IE to set the value of line-height to ensure that the text is vertically centered. Please note here that if there are values ​​such as line-height set in the reset style file, please reset line-height. , you can use line-height:normal. For details, you can look at the search box on Tencent’s Hollywood page.

Specific css:

Copy code

The code is as follows:

height: 34px;
font-size: 12px;
line-height: normal;
line-height: 34px9;