CSS compatibility has always been a headache for everyone. IE6, IE7, and FF have been a headache for everyone. Since the official version of IE8 was released, we have been looking for a way to distinguish IE8 from the official version.
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 」,「*」,「_」 # Tip {
Background : Blue ; /* Firefox background turns blue */
Background : Red \ 9 ; /* The IE8 background turns red */
* Background : Black ; /* IE7 black */
_ Background : Orange ; /* The IE6 background changes to orange */
}
[Note]: The IE series browsers can read "\ 9" (also see the "9 margin: 0px auto" 9 ;), IE6 and IE7 can read "*" (MI font size), and IE6 can recognize "_" (bottom line), so you can write it down in order, this will allow the browser to correctly read and understand CSS syntax, so it can effectively differentiate ie versions and non-ie browsers (such as Firefox, opera, Google Chrome, Safari, etc ).
Summarize CSS hack of each IE version.
Hack |
Example |
IE6 (s) |
IE6 (q) |
IE7 (s) |
IE7 (q) |
IE8 (s) |
IE8 (q) |
* |
* Color |
Yes |
Yes |
Yes |
Yes |
No |
Yes |
+ |
+ Color |
Yes |
Yes |
Yes |
Yes |
No |
Yes |
- |
-Color |
Yes |
Yes |
No |
No |
No |
No |
_ |
_ Color |
Yes |
Yes |
No |
Yes |
No |
Yes |
# |
# Color |
Yes |
Yes |
Yes |
Yes |
No |
Yes |
\ 0 |
Color \ 0 |
No |
No |
No |
No |
Yes |
No |
\ 9 |
Color \ 9 |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
! Important |
Color: Blue! Important; Color: green; |
No |
No |
Yes |
No |
Yes |
No |