1. What is hack technology?

Because different browsers, such as Internet Explorer 6,Internet Explorer 7,Mozilla Firefox and so on, have different understanding of CSS analysis, it will lead to different page effects and not get the page effects we need.
At this time, we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, and can also get the desired page effect in different browsers.
This process of writing different CSS code s for different browsers is called CSS hack, or CSS hack.

2.CSS hack tips

Examples:

Hack Application Situations (I)

Scope of application: Compatibility between IE: 6.0, IE7.0 and IE8.0
Example: In this case, we use progressive identification to gradually exclude parts from the whole. First, cleverly use the tag 9 to separate IE visitors from all situations. Next, we use "+" to separate IE8 from IE7 and IE6. At this time, our IE8 has been independently identified.
Example code:

.bb{
height:32px;
background-color:#f1ee18;/*All recognition*/
.background-color:#00deff\9; /*IE6,7,8 Distinguish*/
+background-color:#a200ff;/*IE6,7 Distinguish*/
_background-color:#1e0bd1;/*IE6 Distinguish*/
}
/*A div tag with class bb for display*/
< div class ="bb"></ div >

Hack Application Situations (II)

Scope of application: IE:6.0,IE7.0,IE8.0,Firefox compatibility
Examples: It is easy to see that this is an enhanced version of the situation (1), which is applicable to a wider range of environments. In fact, the situation (1) has also made it possible to distinguish firefox from IE tourists. Now we need to recognize firefox from other tourists again. If you look at the code carefully, you will find that it is very simple to identify the visitor. How can firefox be identified? By the way, pseudo-classes are not widely supported in IE, so pseudo-classes are a good way. (.yourClass,x:-moz-any-link, x:default). Note that this distinction between pseudo-classes can often be recognized by IE7, so it is better to recognize IE7 separately, and this method is no longer valid for ff3.6. firefox can be distinguished by @-moz-document url-prefix(){}
Example code:

.bb{
height:32px;
background-color:#f1ee18;/*All recognition*/
background-color:#00deff\9; /*IE6,7,8 Distinguish*/
+background-color:#a200ff;/*IE6,7 Distinguish*/
_background-color:#1e0bd1;/*IE6 Distinguish*/
}
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5 And the following identification */ 
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* firefox Recognition Only */ 
* +html .bb{background-color:#a200ff;}/* IE7 Recognition Only */

/*A div tag with class bb for display*/
< div class ="bb"></ div >

Hack Application Situations (3)

Scope of application: Compatibility between IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)
Example: We will now strengthen our CSS again to recognize the Safari(Chrome) viewer. This is recognized based on their kernel webkit, which is @media screen and (-webkit-min-device-pixel-ratio:0)
Example code:

.bb{
height:32px;
background-color:#f1ee18;/*All recognition*/
background-color:#00deff\9; /*IE6,7,8 Distinguish*/
+background-color:#a200ff;/*IE6,7 Distinguish*/
_background-color:#1e0bd1;/*IE6 Distinguish*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) effective */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5 And the following identification */ 
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*firefox Recognition Only*/ 
* +html .bb{background-color:#a200ff;}/* IE7 Recognition Only */

/*A div tag with class bb for display*/
< div class ="bb"></ div >