CSS hack summary and its best usage show you how to use hack to solve style compatibility of various browsers.

CSS hack Summary

In the process of page development, there will always be such incompatibility issues. After trying to avoid using elements and styles with poor compatibility, there will often be details of incompatibility issues, front-end engineers pursuing perfection should adopt CSS hack to solve the problem.

There are a lot of CSS hack materials on the Internet, but many of them are wrong or not. Today I will give a detailed summary of them and their most foolproof usage ~

 

All effects have been tested by various browsers

First, the CSS hack to be mentioned includes: _, *, \ 0, \ 9, \ 0 \ 9 ,! Important

Roles of each hack:

_: Used for IE6

Code:

 
1Background-color: blue;
2_ Background-color: red;
 

Effect:

 

* And +: used for IE6 and IE7

Code:

1Background-color: blue;
2* Background-color: red;
 

 
1 Background-color: blue;
2 + background-color: red;
 

Results:

\ 0: used for IE8 and ie9

Code:

 
1Background-color: blue;
2Background-color: Red \ 0;
 

Effect:

That's right. It cannot be identified in IE6 ~~~

\ 9: used for IE6, IE7, IE8, and ie9

Code:

 
1Background-color: blue;
2Background-color: Red \ 9;
 

Effect:

\ 9 \ 0: used for ie9

Code:

 
1Background-color: blue;
2Background-color: Red \ 9 \ 0;
 

Effect:

That's right, IE6 is not recognizable ~~~~

 

! Important: Used in all browsers. It cannot be regarded as hack. It is not recommended.

Code:

 
1Div {
2Background-color: red! Important;
3}
4# Test {
5Background-color: blue;
6}
 

Effect:

Add! Important can ignore the CSS priority completely ~~~

Best CSS hack Application Method

So how to use CSS hack to achieve the best effect-does not affect the Browser style that already complies with the standard?

For IE6:

Code

 
1 Background-color: blue;
2 _ Background-color: red;
 

If both IE7 and IE6 have problems:

Select either of the following two:

Code:

 
1Background-color: blue;
2* Background-color: red;
 

 

 
1Background-color: blue;
2+ Background-color: red;
 

What if only IE7 is used?

Code:

 
1Background-color: blue;
2* Background-color: red;
3_ Background-color: blue;
 

For IE8:

Code:

 
1Background-color: blue;
2Background-color: Red \ 9;
3* Background-color: blue;
4Background-color: Blue \ 9 \ 0;
 

For ie9:

Code:Remember to restore IE6 ~

 
1Background-color: blue;
2Background-color: Red \ 9 \ 0;
3_ Background-color: blue;
 

For the entire ie:

 
1Background-color: blue;
2Background-color: Red \ 9;