Collation of DIV + CSS compatibility issues with IE6 IE7 and IE8

1. Differences between IE and non-IE browsers

# Tip {
Background: blue;/* Non-IE background colors */
Background: red \ 9;/* IE6, IE7, and IE8 background colors */
}

2. Differences between IE6, IE7, IE8, and FF

[Difference]: "\ 9", "*", and 」,「*」,「_」
[Example]: # tip {
Background: blue;/* the Firefox background turns blue */
Background: red \ 9;/* The IE8 background turns red */
* Background: black;/* The IE7 background turns black */
_ Background: orange;/* change the IE6 background to orange */
}

[Note]: Internet Explorer series can read "\ 9", Internet Explorer 6 and Internet Explorer 7 can read "*" (in meters), and Internet Explorer 6 can recognize "_" (bottom line ), therefore, you can write it down in order, so that the browser can correctly read and understand the CSS syntax, therefore, you can effectively distinguish IE versions from non-IE browsers (such as Firefox, Opera, Google Chrome, and Safari ).

3. Differences between IE6, IE7, and Firefox (method 1)

[Difference]: "*" and ]:「*」,「_」
[Example]: # tip {
Background: blue;/* the Firefox background turns blue */
* Background: black;/* The IE7 background turns black */
_ Background: orange;/* change the IE6 background to orange */
}

[Note]: IE7 and IE6 can read "*", while IE6 can read "_" (bottom line), but IE7 cannot read 「_」, firefox (non-ie browsers) cannot identify "*" or "_" at all. Therefore, we can distinguish IE6, IE7, and Firefox through such differences.

4. Differences between IE6, IE7, and Firefox (method 2)

[Difference symbol ]:「*」,「! Important 」
[Example]: # tip {
Background: blue;/* the Firefox background turns blue */
* Background: green! Important;/* The IE7 background turns green */
* Background: orange;/* The IE6 background changes to orange */
}

[Note]: IE7 can identify "*" and 「! Important, but IE6 can only recognize "*", but cannot recognize 「! Important. Firefox can read 「! Important ", but cannot identify" * ". Therefore, we can effectively distinguish IE6, IE7, and Firefox by using these differences.

5. Differences between IE7 and Firefox

[Difference symbol ]:「*」,「! Important 」
[Example]: # tip {
Background: blue;/* the Firefox background turns blue */
* Background: green! Important;/* The IE7 background turns green */
}

[Note]: Firefox can recognize 「! Important, but cannot identify "*", while IE7 can understand "*" and "!" at the same time 「*」,「! Important, so you can separate IE7 and Firefox with two identifiers.

6. Differences between IE6 and IE7 (method 1)

[Difference]: "*" and ]:「*」,「_」
[Example]: # tip {
* Background: black;/* The IE7 background turns black */
_ Background: orange;/* change the IE6 background to orange */
}

[Note]: Both IE7 and IE6 can recognize "*", but IE6 can recognize "_" (bottom line), but IE7 cannot, the difference between IE6 and IE7 can be easily separated by the feature that IE7 cannot read.

7. Differences between IE6 and IE7 (method 2)

[Difference symbol ]:「! Important 」
[Example]: # tip {
Background: black! Important;/* The IE7 background turns black */
Background: orange;/* change the background of IE6 to orange */
}

[Note]: Because IE7 can read 「! Important; "but IE6 does not work, and the CSS read step is from top to bottom. Therefore, IE6 cannot be recognized when reading 「! Important directly jumps to the next line to read CSS, so the background color is orange.

8. Differences between IE6 and Firefox

[Difference symbol ]:「_」
[Example]: # tip {
Background: black;/* the Firefox background turns black */
_ Background: orange;/* change the IE6 background to orange */
}

[Note]: IE6 can recognize "_" (bottom line), but Firefox cannot. Therefore, Firefox and IE6 can be separated by such differences to effectively achieve CSS hack.