Compatibility issues of DIV CSS relative to IE6 IE7 and IE8_html/css_WEB-ITnose

1. Difference between IE and non-IE browsers

#tip {
background: blue; /*Non-IE background? Color*/
background: red 9 ; /* IE6, IE7, IE8 background color*/
}

2. Difference between IE6, IE7, IE8, FF

[Difference symbol]: "9", "* ", "_"
【Example】:

#tip {
background : blue ; /* Firefox background turns blue*/
background : red 9 ; /* IE8 background turns blue Red*/
*background : black ; /* IE7 background turns black*/
_background : orange ; /* IE6 background turns orange*/
}

[Explanation]: Because IE series browsing The browser can read "9", and IE6 and IE7 can read "*" (rice font size). In addition, IE6 can recognize "_" (underline), so you can write it down in order, and the browser will read it correctly. You can understand CSS syntax, so you can effectively distinguish between IE versions and non-IE browsers (such as Firefox, Opera, Google Chrome, Safari, etc.).
3. Distinguish between IE6, IE7 and Firefox (Method 1)

[Difference symbols]: "*", "_"
[Example]:

#tip {
background : blue ; /* Firefox background turns blue*/
*background : black ; /* IE7 background turns black*/
_background : orange ; /* IE6 background turns orange*/
}

【Explanation】: IE7 and IE6 can read "*" (rice font size), IE6 can read "_" (underline), but IE7 cannot read "_", as for Firefox (non-IE browser) It is completely impossible to identify "*" and "_", so you can use this difference to distinguish IE6, IE7, and Firefox
4. Distinguish IE6, IE7, and Firefox (Method 2)

[ Distinguishing symbols]: "*", "!important"
[Example]:

#tip {
background: blue; /* Firefox background turns blue*/
*background: green !important ; /* IE7 background turns green*/
*background : orange ; /* IE6 background turns orange*/
}

[Note]: IE7 can recognize "*" and "!important" ", but IE6 can only recognize "*", but cannot recognize "!important". As for Firefox, it can read "!important" but cannot recognize "*". Therefore, this difference can be used to effectively distinguish IE6, IE7, and Firefox .
5. Difference between IE7 and Firefox

[Difference symbols]: "*", "!important"
[Example]:

#tip {
background: blue ; /* Firefox background turns blue*/
*background : green !important ; /* IE7 background turns green*/
}

[Explanation]: Because Firefox can recognize "!important" but cannot Recognize "*", while IE7 can understand "*" and "!important" at the same time, so two identification symbols can be used to distinguish IE7 and Firefox.
6. Distinguish between IE6 and IE7 (Method 1)

[Difference symbols]: "*", "_"
[Example]:

#tip {
*background : black ; /* IE7 background turns black*/
_background : orange ; /* IE6 background turns orange*/
}

[Note]: Both IE7 and IE6 can recognize "*" ( (m font size), but IE6 can recognize "_" (underline), but IE7 cannot. The difference between IE6 and IE7 can be easily distinguished by the fact that IE7 cannot read "_".
7. Distinguish between IE6 and IE7 (Method 2)

[Difference symbol]: "!important"
[Example]:

#tip {
background: black !important ; /* IE7 background turns black*/
background : orange ; /* IE6 background turns orange*/
}

[Explanation]: Because IE7 can read "!important;" but IE6 But it doesn't work, and the CSS reading step is from top to bottom, so when IE6 reads it, it jumps directly to the next line to read the CSS because it cannot recognize "!important", so the background color will appear orange.
8. Difference between IE6 and Firefox

[Difference symbol]: "_"
[Example]:

#tip {
background: black; /* Firefox background Turn black*/
_background : orange ; /* IE6 background turns orange*/
}

[Explanation]: Because IE6 can recognize "_" (underline), but Firefox cannot, so it can be transparent This difference is used to distinguish Firefox and IE6 and effectively achieve CSS hack.