The best way to differentiate between IE6, IE7, IE8, and standard browsers in Web refactoring

Because of all the evil IE6 and IE7, we have to make various bug fixes and differences in page reconstruction. The effect that can be achieved in the standard browser in IE, there are a variety of bizarre problems, such as IE6, IE7 can not respond well to the inline-block and. Clearfix problem, fortunately, most of the problems have been enough to summarize and approach. Not much nonsense to say, here are some ways to differentiate between browsers and my views.

Main approach

CSS Hack

Writing CSS hack directly in a CSS file is a very intuitive way to differentiate. The hack code that distinguishes between different IE versions is

#content {
background:red; /* All browsers */
background:orange\9; /* All IE browsers */
*background:yellow; /* IE7 and IE6 */
+background:green; /* IE7 */
_background:blue; /* IE6 */
}

There are some hack not very practical, not listed.
The disadvantage of CSS hack is that CSS files cannot be verified by the publisher, which can be very strange when reading code.

Conditional comment CSS File

Conditional comments are written in the HTML will only be recognized by IE code, generally in the

<!--[If ie]>
< link rel= "stylesheet" href= "/ie-all.css" type= "text/css" media= "screen"/>
<! [endif]-->
<!--[If Lt IE 8]>
< link rel= "stylesheet" href= "/ie.css" type= "text/css" media= "screen"/>
<! [endif]-->
<!--[if IE 7]>
< link rel= "stylesheet" href= "/ie7.css" type= "text/css" media= "screen"/>
<! [endif]-->
<!--[if IE 6]>
< link rel= "stylesheet" href= "/ie6.css" type= "text/css" media= "screen"/>
<! [endif]-->

Because IE8 under the CSS problem is less, generally only need to write a little bit of correction code for IE6, 7. If necessary, you can use CSS hack to ie.css the IE6/7 in a different process.

<!--[If Lt IE 8]>
< link rel= "stylesheet" href= "/ie.css" type= "text/css" media= "screen"/>
<! [endif]-->

The disadvantage of conditional comment CSS files is that it adds at least 1 HTTP requests, affects rendering speed, and is not easy to maintain.

Conditional Comments

The conditional comment

<!--[If LT IE 7]> <!--[if IE 7]> <!--[if IE 8]> <!--[if IE 9]> <!--[if (GT IE 9) |! (IE)] ><!-->

This allows you to differentiate between versions using the following code in CSS

#content {background:red;}
. IE9 #content {background:orange;}
. IE8 #content {background:yellow;}
. IE7 #content {background:green;}
. IE6 #content {background:blue;}

You can also add classes such as. Ltie8 to make it easier to manage version groups. This method does not increase the HTTP request and does not require any hack.

Best practices

There is no doubt that the best way is to use conditional annotation

Standard browser: This article refers to browsers that support CSS standard properties such as IE9, Chrome, Safari, Firefox, and opera.

Reprint: http://www.iefans.net/wangye-ie6-ie7-ie8-biaozhun/

The best way to differentiate between IE6, IE7, IE8, and standard browsers in Web refactoring