The principle of setting the cursor height in Chrome browser is that when there is no content, the cursor height = the value of input line-height. When there is content, the cursor size in the input input input box is displayed inconsistently from the top of the input to the bottom of the text.
IE7 is very obvious in neutralizing Chrome
Let’s take a look at the reason for the problem: the chrome browser’s principle of setting the cursor height is: when there is no content, the cursor height = the value of line-height of input. When there is content, the cursor goes from the top of input to the bottom of the text.
OK, since we know the reason, we will take some measures accordingly. I tried two ways to do it:
Method 1: Set the value of line-height to the same size as the font size; if the height is not reached, use padding to support it;
Method 2: Do not set line-height for Chrome, it will automatically center the text. Hack the value of line-height for ie to ensure that the text is vertically centered; here you should note that if you set line-height values in the style file of reset, please reset line-height, you can use line-height:normal. For details, you can check out the search box of Tencent Hollywood page.
Specific css:
Copy the code