Simple CSS hack: differentiate IE6, IE7, IE8, Firefox, and Opera

I. cross-browser web page design has always been a headache. This is not only because of the large number of browser versions, but also because the versions of the same browser may vary in different periods, even different operations may be different on the same platform. Therefore, it is a good way to distinguish the CSS hack technology from the browser to achieve cross-browser access. There are many CSS Hack technologies. For details, refer:

This article is said to distinguish between ".", ">", "*", and. The following is my test results on these four symbols:
------- IE6 -- IE7--IE8--FF2--FF3-Opera9.5
> Property -- Y -- N
. Property -- Y -- N
* Property -- Y -- N
_ Property -- Y -- N

We can see that> property,. property, and * property are consistent in different browsers. Only _ property is different in IE6, IE7, and IE8. In addition, IE6 is not supported! Important, while several other browsers recognize it.

Example:
You can use color: brown to display different colors in different browsers for the same text! Important;/* used in modern browsers such as Opera, Firefox2, and Firefox3 */
> Color: green! Important;/* IE7 and IE8 can recognize this rule, so it overwrites the previous rule */
Color: red;/* all browsers can recognize them, but the above two rules are available! Important, so this rule is ignored. Only IE6 recognizes and overwrites two rules */

Color: brown! Important;/* used in modern browsers such as Opera, Firefox2, and Firefox3 */
> Color: green! Important;/* IE7 and IE8 can recognize this rule, so it overwrites the previous rule */
Color: red;/* all browsers can recognize them, but the above two rules are available! Important, so this rule is ignored. Only IE6 recognizes and overwrites two rules */
Therefore, cross-browser performance is achieved. _ Property and * property are the same. For _ property, only IE6 can be identified. Therefore, it can be used to set IE6 separately.

But pay attention to the order of writing: the browser should write at the beginning, the IE6 should write at the end for overwrite, and other browsers should write in the middle.

Ii. In fact, it is mainly used in browsers: IE6, IE7, and firefox, which have different interpretations of CSS code. I will repost an HACK Article below, which is quite practical.

Difference between IE6 and FF: background: orange; * background: blue;

Difference between IE6 and IE7: background: green! Important; background: blue;

Difference between IE7 and FF: background: orange; * background: green;

Difference FF/IE7/IE6: background: orange; * background: green! Important; * background: blue;

Note: IE can recognize * 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

Add another underscore "_",
IE6 supports underlines, while IE7 and firefox do not. (Recommended. This is only valid for me !)

So you can also distinguish IE6, IE7, and firefox.
: Background: orange; * background: green; _ background: blue;

Iii. Simplest CSS Hack: differentiate IE6, IE7, IE8, and Firefox

. Color {
Background-color: # CC00FF;/* all browsers are purple */
Background-color: # FF0000 \ 9;/* IE6, IE7, and IE8 are displayed in red */
* Background-color: # 0066FF;/* IE6 and IE7 change to blue */
_ Background-color: #009933;/* IE6 turns green */
}

The preceding style is interpreted as the result of ff, ie8, ie7, and ie6:
Use FF to browse. The color is purple.
Use IE8 to browse. The color is red.
Use IE7 for browsing. The color is blue.
Use IE6 to browse. The color is green.