background

A few days ago, I participated in the secondary development of the backstage administrator page of the company’s project. I encountered some compatibility problems in the project. I will make a summary and record this document for easy viewing later. [PS: Problems were exposed one by one in the project, causing a little panic]

The problem

1. Textarea in Firefox
Problem description

When I participated in the development of Java Web side, I found that the font of textarea text box was larger than input in Firefox browser, but it displayed normally in other browsers, as shown in the following figure:

The reset.css resets the source code as follows:

The solution
  • Method one:

Delete the purple sentence above, and the font size in Firefox is the same as the font size in input, but the font type is different

  • Method 2:

Font-family: arial, sans-serif; font-size:14px; font-size:14px

Ps: Since this problem only occurs in Firefox, I was confused. I have never had this problem with reset.css before, so I don’t know what the real problem is. Hope god points out.

Font-family: arial, sans-serif
  • Font -family is recommended
2, Line-height is not centered in firefox

It’s a 1px eye. I found that my web page in Firefox didn’t have a vertically centered font for the buttons

Problem Description:

Height: 34px; line-height:34px; The only browser that isn’t vertically centered is Firefox.

I changed line-height:34px to: line-height:30px; The display is vertically centered in Firefox, but in other browsers… See? Helpless…

The renderings are as follows:

Solutions:

I’m going to write it as line-height

The line - height: 1.5;Copy the code
There are 5 ways to define line-height
1) div{line-height: nomal} is the default. It is not recommended because it varies from browser to browser. Firefox is around 34px. The oprea is about 30px. 2) div{line-height:inherit} inherits the parent element, does not define the default value, and is not recommended. 3) div{line-height:150%} 4) div{line-height: 20px} is the form of the length. I will talk about some common CSS length units later. 5) div{line-height:1.5} pure numbers, I recommend the way, can adapt to various.Copy the code
About line-height

  • In-depth analysis of line-height features and best practices in browsers

  • Some in-depth understanding and application of CSS line height

Expand knowledge
  • Disallow textarea resizing
textarea{
	resize: none;
}
Copy the code

[PS: Compatibility problems encountered in the later period will continue to be updated and supplemented in this document. If you have better solutions, please leave a message.]