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

One, cross-browser web design has always been a headache, this is not only because the browser version is numerous, there is also an important reason is that the same browser version of the different times will be different, even in different operations on the same platform will have a difference. So making CSS hack technology browser-sensitive is a good way to achieve cross-browser access. There are many CSS hack techniques, which can be viewed in detail:

This article is said to be mainly distinguished by ".", ">", "*", "_". Here are my test results for these four types of symbols:
——————— ie6--ie7--ie8--ff2--ff3-opera9.5
>property--y--y--y--n--n--n
. Property--y--y--y--n--n--n
*property--y--y--n--n--n--n
_property--y--n--n--n--n--n

we can see that the >property,. property, *property are consistent across browsers, and only _property differ in IE6 and IE7 and IE8. It is also important to note that IE6 is not supported by!impOrtant, while several other browsers are recognized.

Example:
To display different colors in different browsers for the text you want to use: Color:brown!important; /* For modern browsers such as opera, Firefox2, FIREFOX3, etc. * /
>color:green!important; /*IE7, IE8 can recognize the rule, so it overrides the previous rule */
color:red; /* All browsers can be recognized, but the above two rules are!important, so this rule is neglected; only IE6 know and cover up two rules * *


Color:brown!important; /* For modern browsers such as opera, Firefox2, FIREFOX3, etc. * /
>color:green!important; /*IE7, IE8 can recognize the rule, so it overrides the previous rule */
color:red; /* All browsers can be recognized, but the above two rules are!important, so this rule is neglected; only IE6 know and cover up two rules * *
as a result, cross-browser performance issues are achieved. _property and *property are the same. For _property, only IE6 is recognized, so it can be used in separate settings for IE6.

but here to pay attention to the order of writing: Now the browser's writing to write in the front, IE6 to write in the last face for coverage, other browsers written in the middle.

second, in fact, the main browser: Ie6/ie7/firefox, each of the interpretation of the CSS code is different, the following reprint an article hack, quite practical.

distinguish between IE6 and ff:background:orange;*background:blue;

difference between IE6 and IE7:background:green!impOrtant;background:blue;

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

difference Ff/ie7/ie6:background:orange;*background:green!impOrtant;*background:blue;

Note: IE can recognize * standard browser (e.g. FF) not recognized *
IE6 can recognize *, but not recognize!important
IE7 can identify the *, can also identify!important
FF does not recognize *, but can recognize!important

In addition, add one, underline "_",
IE6 support underscores, IE7 and Firefox do not support underscores. (recommended.) I only have this valid! ) 

so you can also distinguish IE6, IE7, Firefox
: Background:orange;*background:green;_background:blue;

Third, The simplest CSS Hack: differentiate Ie6/ie7/ie8/firefox

 

. Color{
Background-color:#CC00FF; /*all browsers will be displayed as purple*/
Background-color:#FF0000 \9; /*IE6, IE7, IE8 will show Red*/
*background-color:#0066FF; /*IE6, IE7 will turn blue*/
_background-color:#009933; /*IE6 will turn green*/
}

The styles above

are interpreted as the results of the FF, IE8, IE7, IE6 displayed:
Browse with FF, color is Purple
Browse with IE8, color is red
Browse with IE7, color is Blue
Browse with IE6, color is green