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
Recommend
Detailed explanation of Docker common commands Study03
Table of contents 1. Help Command 2. Mirror comma...
Advantages and Problems of XHTML CSS Website Design
XHTML is the standard website design language cur...
How to use module fs file system in Nodejs
Table of contents Overview File Descriptors Synch...
Automatic line breaks in html pre tags
At this time, you can use overflow:auto; (when the...
Vue echarts realizes horizontal bar chart
This article shares the specific code of vue echa...
Using JavaScript to implement carousel effects
This article shares the specific code for JavaScr...
HTML+CSS to achieve cyberpunk style button
First look at the effect: Preface: I came up with...
What does this.parentNode.parentNode (parent node of parent node) mean?
The parent node of the parent node, for example, t...
js implements a simple calculator
Use native js to implement a simple calculator (w...
Detailed explanation of HTML form elements (Part 1)
HTML forms are used to collect different types of...
How to draw a vertical line between two div tags in HTML
Recently, when I was drawing an interface, I enco...
A question about border-radius value setting
Problem Record Today I was going to complete a sm...
MySQL stored procedures and common function code analysis
The concept of mysql stored procedure: A set of S...
Detailed process of building nfs server using Docker's NFS-Ganesha image
Table of contents 1. Introduction to NFS-Ganesha ...
How to change mysql password under Centos
1. Modify MySQL login settings: # vim /etc/my.cnf...