Common CSS hack

What is CSS hack in browser compatibility and layout design?
Different browsers, such as Internet Explorer 6, Internet Explorer 7, and Mozilla Firefox, have different understandings of CSS parsing, which leads to different page effects, we cannot get the page effect we need.
At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers.
This process of writing different CSS codes for different browsers is called CSS hack, also called CSS hack.
What is the principle of CSS hack?
Because different browsers have different support for CSS and parse results, they also have a relationship with the priority of CSS. We can write different CSS for different browsers based on this.
For example, IE6 can recognize underline _ and star number *, and IE7 can recognize asterisks *. When underline _ cannot be recognized, neither Firefox can recognize it. And so on.
The writing order is generally to write the CSS of a browser with strong recognition ability behind. The following describes how to write more details.
How to Write CSS hack
For example, to distinguish IE6 from Firefox, you can write as follows:
<Style>
Div {
Background: green;/* For Firefox */
* Background: red;/* For IE6 */
}
</Style>
<Div> I saw red in IE6 and green in Firefox. </Div>
<Style>
Div {
Background: green;/* For Firefox */
* Background: red;/* For IE6 */
}
</Style>
<Div> I saw red in IE6 and green in Firefox. </Div>
Explanations:
In Firefox, the above CSS does not recognize the stuff with an asterisk *, so it is filtered out and ignored. The parsed result is: div {Background: Green}, so the background of this div is green.

In IE6, both background can be identified. The parsed result is:

Div {Background: green; Background: red ;},

Therefore, according to the priority level, the red at the back has a high priority, so of course the background color of this div is red.
CSS hack: distinguishes IE6, IE7, and Firefox from different browsers. CSS hack Syntax:
Difference between IE6 and FF:
Background: orange; * Background: blue;
Background: orange; * Background: blue;
Difference between IE6 and IE7:
Background: Green! Important; Background: blue;
Background: Green! Important; Background: blue;
Difference between IE7 and FF:
Background: orange; * Background: green;
Background: orange; * Background: green;
Difference ff, IE7, IE6:
Background: orange; * Background: Green! Important; * Background: blue;
Background: orange; * Background: Green! Important; * Background: blue;
Note: Both IE and standard browsers (such as ff) cannot recognize *;
IE6 can recognize *, but cannot recognize it! Important,
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;
IE6 IE7 FF
* √ *
! Important × √

In addition, the underscore (_) is added. IE6 supports underlines. IE7 and Firefox do not support underlines.
So you can also distinguish IE6, IE7, and Firefox.
Div {: Background: orange;
* Background: green;
_ Background: Blue ;}
Div {: Background: orange;
* Background: green;
_ Background: Blue ;}
Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, IE6's Writing
At the end