IE Conditional Comments
April 9, 2008
Proprietary coding is often looked down upon by the standards-aware web developer. But at times (especially when dealing with Internet Explorer), it is a necessary evil.
I often find I couldn’t live without them to achieve pixel perfect designs across a number of browsers
Simple Conditional Comments Introduction:
Note the special syntax:
- lt = less than
- lte = less than or equal
- gt = greater than
- gte = greater than or equal
Examples:
<!--[if IE]>This targets Internet Explorer<![endif]-->
<!--[if IE 5]>This targets Internet Explorer 5<![endif]-->
<!--[if IE 5.0]>This targets Internet Explorer 5.0<![endif]-->
<!--[if IE 5.5]>This targets Internet Explorer 5.5<![endif]-->
<!--[if IE 6]>This targets Internet Explorer 6<![endif]-->
<!--[if IE 7]>This targets Internet Explorer 7<![endif]-->
<!--[if gte IE 5]>This targets Internet Explorer 5 and up<![endif]-->
<!--[if lt IE 6]>This targets Internet Explorer lower than 6<![endif]-->
<!--[if lte IE 5.5]>This targets Internet Explorer lower or equal to 5.5<![endif]-->
<!--[if gt IE 6]>This targets Internet Explorer greater than 6<![endif]-->
Real World Usage:
When there is a need to apply style to IE only, I often create a separate CSS file called “fix_lteie6.css” (or something similar), where all of the IE-specific styles will be located.
I link to this file in the HTML using the code below:
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/fix-lteie6.css" media="all" /><![endif]-->
