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
HTML table tag tutorial (11): horizontal alignment attribute ALIGN
In the horizontal direction, you can set the alig...
Example analysis of interval calculation of mysql date and time
This article uses an example to describe the inte...
A brief analysis of the difference between ref and toRef in Vue3
1. ref is copied, the view will be updated If you...
Specific operations of MYSQL scheduled clearing of backup data
1|0 Background Due to project requirements, each ...
Detailed explanation of JavaScript private class fields and TypeScript private modifiers
Table of contents JavaScript private class fields...
A brief analysis of the four import methods and priorities in CSS
First: 4 ways to introduce CSS There are four way...
Solution to the problem of var in for loop
Preface var is a way to declare variables in ES5....
HTML table tag tutorial (36): table header background color attribute BGCOLOR
The <TH> tag is used to set the properties ...
A brief analysis of mysql index
A database index is a data structure whose purpos...
A brief discussion on front-end network, JavaScript optimization and development tips
1. Network Optimization YSlow has 23 rules. These...
Conditional comment style writing method and sample code
As front-end engineers, IE must be familiar to us...
A brief analysis of how MySQL implements transaction isolation
Table of contents 1. Introduction 2. RC and RR is...
WeChat applet implements a simple handwritten signature component
Table of contents background: need: Effect 1. Ide...
Detailed explanation of JS ES6 variable destructuring assignment
Table of contents 1. What is deconstruction? 2. A...
How to bind domain name to nginx service
Configure multiple servers in nginx.conf: When pr...