Solution to inconsistent display of cursor size in input box

The cursor size in the input box is inconsistent

The difference between IE7 and Chrome is very obvious

Let's first look at the cause of the problem: the Chrome browser sets the cursor height in the following principle: when there is no content, the cursor height = the value of the input's line-height; when there is content, the cursor moves from the top of the input to the bottom of the text.

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

Method 1: Set the line-height value to the same 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, and set the line-height value for IE to ensure that the text is vertically centered. Please note here that if line-height and other values are set in the reset style file, please reset line-height, you can use line-height:normal. For details, please look at the search box on the Tencent Hollywood page.

Specific css:

Copy code

The code is as follows:

height: 34px;
font-size: 12px;
line-height: normal;
line-height: 34px\9;

<<: A brief analysis of CSS3 using text-overflow to solve text layout problems

>>: Learn more about the most commonly used JavaScript events

How to solve the problem of ping being successful but the port being unavailable in Linux

IDEA reports an error when connecting to MySQL! Server returns invalid timezone. Go to tab and set serverTimezone property

Blog

Solution to inconsistent display of cursor size in input box

How to solve the problem of ping being successful but the port being unavailable in Linux

React Fiber structure creation steps

Learn MySQL index pushdown in five minutes

Summary of discussion on nginx cookie validity period

Try Docker+Nginx to deploy single page application method

js to achieve simple front-end paging effect

CSS optimization skills self-practice experience

Use of JavaScript sleep function

Teach you how to use webpack to package and compile TypeScript code

IDEA reports an error when connecting to MySQL! Server returns invalid timezone. Go to tab and set serverTimezone property

Recommend

mysql5.7 installation and configuration tutorial under Centos7.3

Summary of twelve methods of Vue value transfer

How to build a standardized vmware image for kubernetes under rancher

Summary of MySQL character sets

Realization of real-time file synchronization between Linux servers

CentOS 7.2 builds nginx web server to deploy uniapp project

Linux uses the scp command to copy files to the local computer and copy local files to the remote server

Some summary of MySQL's fuzzy query like

Installation and usage analysis of Portainer, a visual UI management tool for Docker

Founder font library Chinese and English file name comparison table

An audio-visual Linux distribution that appeals to audiophiles

JavaScript to implement simple carousel chart most complete code analysis (ES5)

Implementation of new issues of CSS3 selectors

Several things to note when making a web page

WeChat applet custom bottom navigation bar component