Differentiate IE versions in Web pages

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)] ><! - <HTMLclass=""> <!--<! [EndIf] -

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.

The judgment statement in IE

The above <!--[if LTE IE 6]> is a comment in normal HTML and will not be executed, but is a judgment statement in IE, so the code will be recognized and loaded only in IE.

LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning. LT: is less than shorthand, that is, smaller than the meaning. GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning. GT: is greater than shorthand, that is, the meaning of greater than. : Is not equal to the meaning of the JavaScript is not equal to the same judge

Differentiate IE versions in Web pages