CSS for solutions to browser compatibility-tested in IE, FF, and Chrome

In JavaScript For browser compatibility-solutions to browser compatibility issues have been tested in IE, FF, Chrome, in IE, FF, and Chrome tests, the CSS compatibility and JS compatibility in the browser have been briefly described, now, we will continue to briefly describe the compatibility of CSS in the browser.

1) the list cannot wrap.

Problem:

Li is set to floating, followed by li, cannot wrap

Solution:

Clear floating: clear: both on the next li

Instance:

 
Level 1 title
  
  

    Level 2 Title 
  
     
  
  

    Level 2 Title 
  
    
 
Level 1 title
  
  

    Level 2 Title 
  
     
  
  

    Level 2 Title 
  
    
 

2) HowAlignmentText and text input boxes

Problem:

When the input element is set high, text and text input boxes cannot be aligned in IE7, IE8, and IE9. Others are normal, including opera

Solution:

Vertical-align: middle;

Instance:

Before modification: User NamePassword

Modified: User NamePassword

3) The container width varies in the browser.

Problem:

Different browsers have different widths. For example, if width: 200px is set, 200px is displayed in iE7, IE8, and IE9, and 220px is displayed in FF, Chrome, and Opera.

Solution:

Use width: 200px; * width: 220px. In iE7, IE8, and IE9, two widths are identified. If the width is later, the width is 220px. In FF, Chrome, and Opera, identify the first width. After Resolution, the display width is 220px.

Instance:

Before correction: Click me to see what is different! After correction: Click me to see what is different!

4) Div Center

Problem:

IE7, IE8, and IE9 do not enable div center display after margin-left and margin-right are set to auto.

Solution:

Set the body to center and define text-algin: center

Instance:

Solve div center problems

5) font size issues

Problem:

The font size of small is defined differently. Firefox is 16px, IE7, IE8, and IE9 is 16px, and the difference is quite large.

Solution:

Specify the font size, for example, 16px

Instance:

The content in the p object. The font size is small.
　
The content in the p object. The font size is fixed to 16 PX.

6) min-height problem

Problem:

IE7, IE8, and IE9 do not recognize min-height. No other problems

Solution:

# Box {width: 100px; height: 35px ;}

Html> body # box {width: auto; height: auto; width: 100px; min-height: 35px ;}

Instance:

　　Minimum Width Problem
Minimum Width problem solution: Minimum Width Problem
Minimum Width Problem

7) layer vertical center

Problem:

Layer cannot be vertically centered

Solution:

Use position: absolute; top: 50%; left: 50%; margin:-100px; width: 200px; height: 200px; border: 1px solid red;

Instance:

Layer vertical center

8) center of nested div labels

Problem:

Suppose there is a situation: div nested div

In this case, you must set the center position of the inner div in the outer div. After text-algin is set as the center, IE7, IE8, and IE9 are displayed normally, however, IE10, chrome, opera, and FF are still displayed on the left.

Solution:

In addition to setting text-algin as the center in the outer layer, set the margin: 0 auto style in the inner layer div.

Instance:

　　Before resolving: center of nested div labels after solving: center of nested div labels

9) td height issues

Problem:

In IE9, IE10, FF, and chrome, the height of table td does not contain the width of border, but the height of td in IE7 and IE8 contains the height of border, set line-height to the same as line-height.

Solution:

No solution

The problem example is as follows:

 
 

  
  
 
   
 
    
Set line-height: 20px
 
   
 
  
 
 
 
 

  
  
 
   
 
    
Set height: 20px
 
   
 
  
 
 

10) a typographical error occurs when the li height is specified.

Problem:

In IE7, if the height is specified for li, typographical dislocation may occur. Other Browsers Do Not.

Solution:

Set line-height

Instance:

Before solution:
Hello
Hello
Hello
Hello
After solution:
Hello
Hello
Hello
Hello

11) default value of list-style-position

Problem:

In IE7, FF, chrome, and Opera, the default list-style-position attribute of li is inside, while in IE8, IE9, and IE10, the default list-style-position: outside

Solution:

Specify the display style

Instance:

Before solution:
Hello
Hello
After solution:
Hello
Hello

12) prohibit the selection of webpage content

Problem:

To disable the selection of webpage content, FF uses-moz-user-select: none, and other browsers use onselectstart = 'Return false'

Solution:

FF:-moz-user-select: none

Others: onselectstart = 'Return false'

Instance:

One function of the kind community is to query the order and pre-order information based on the user name after the user logs on, and import data to the datagrid under the easyui framework, because shehe has done this function in Version 1.0, I completed this part by referring to his code. The fundamental idea is the same: to convert the search data to the json format, and then display it in the form.

13) how to set the content of its text and text input boxes

Problem:

When the input element is configured with the height and text-align: center, the text and text input box content in IE7, IE8, and IE9 cannot be aligned. Others are normal, including opera

Solution:

Set line-height: 100px in the style

Instance:

Before modification: User NamePassword

Modified: User NamePassword

So far, I 've sorted out the CSS compatibility and JS compatibility here. I feel that these things I 've sorted out are just some of the compatibility issues, I am still waiting to find a solution.