This article is shown on the tutsplus website. It is very interesting to share with you.
The differentiated browser here mainly uses CSS hack. Some people may already know the IE6 and IE7 methods, but today we add a method to distinguish IE8.
IE8 or earlier versions
The key to distinguishing them is to add "\ 9" after the style ".
1. Body {2. Color: red;/* All browsers, of course */3. Color: Green \ 9;/* IE8 and below */4 .}
It must be noted that "\ 9" must be used. I tried to use "\ 8" and it cannot work. It must be "\ 9 ".
IE7 and earlier versions
The key to distinguishing them is to add the "*" symbol before the style, as shown below:
1. Body {2. Color: red;/* All browsers, of course */3. Color: Green \ 9;/* IE8 and below */4. * color: yellow;/* IE7 and below */5 .}
IE6
Many designers may already be familiar with the use of underscores in front of the style to distinguish IE6, which is no more than the "*" symbol, because it is only used to distinguish IE6.
1. Body {2. Color: red;/* All browsers, of course */3. Color: Green \ 9;/* IE8 and below */4. * color: yellow;/* IE7 and below */5. _ color: orange;/* IE6 */6 .}
Use CSS hacks with caution
We do not advocate the use of CSS hacks in any scenario, but recommend the use of conditional annotations. But CSS hacks is not useful at all. At least it can be used to show off to others ~~
Use CSS hacks with caution because it is not forward compatible. Maybe your page will suffer if the newest browser doesn't buy it. If you only want to change one or two attributes to be compatible with IE6, we recommend that you use conditional annotations if the changes are large.
Link: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/