How to detect different IE version? – Conditional Comments

Many times, our pretty CSS alignment or layout is working in Firefox, Opera or Chrome browser, but it failed to interpret correctly in Internet Explorer either in version 5.5, 6 or even 7. This is because Internet Explorer did not follow CSS standard and come out their own Microsoft standard.

We have to use some techniques called CSS hack or conditional comments method to implement specified CSS for specified IE version. Even same CSS layout will display differently between IE 6 and IE 7. This conditional comments are only interpreted by Microsoft Internet Explorer in HTML source code, this is just “IE-only” feature and they’re not supported by any other non-IE browsers. All non-IE browsers will treat it like normal comment in HTML code.

Example

The tag in the below example will let IE 5.5 or 6 read the specified CSS file while IE 7 will ignore it
P.S lt equals to less than

 

The tag in the below example will let IE 7 read the specified CSS file while IE 6 or less will ignore it


Case Study



 


  • Firefox and non-IE browsers will interpret common.css, and ignore common_ie.css and common_ie7.css CSS files.
  • Internet Explorer version 5.5 or 6 will interpret common.css follow by common_ie.css, the CSS value in common_ie.css will override common.css.
  • Internet Explorer version 7 will interpret common.css follow by common_ie7.css, the CSS value in common_ie7.css will override common.css.

Conclusion

The conditional comments technique is a must if we want to implement some cross browsers support website.

By the way, why internet explorer do not follow the CSS standard like other browser? I think this is Microsoft’s way of marketing product – always implement something only Microsoft understand :) . Look forward what Internet Explorer 8 will look like, is this a new innovation product? or just another Microsoft’s “money” product.

Reference

http://en.wikipedia.org/wiki/Conditional_comment

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Retaining Walls American Canyon CA Recent comment authors
newest oldest most voted
Retaining Walls American Canyon CA
Guest
Retaining Walls American Canyon CA

Great work! That is the kind of info that should be shared across the web. Disgrace on the seek engines for not positioning this submit upper! Come on over and seek advice from my web site . Thank you =)