KARPACH

WEB DEVELOPER BLOG

Browser specific css, IE conditional comments.

You should always first write the code for standard-compliant browsers, such as Firefox, Safari, Opera and then correct it for IE7 and IE6. There are two most four ways of writing IE-specific CSS.

  1. My favorite star and underscore hack:
#specificId
{
     *property:value; /* applies to IE7 and IE6 */
     _property:value; /* applies only to IE6 */
}
  1. 7* hack:
/*
  Only versions 5.5 and higher will
  apply these rules, 5.0 will not.

*/

html*#specificId
{
  property:value;
}
  1. Only IE understands css expressions:
#specificId
{
   property:value; /* First apply css style to all browsers */
   property:expression(value);  /* IE specific css */
}

4. IE conditional comments:

<!--[if IE]>
  <style type="text/css"> 
    @import 'iestyle.css'; 
  </style> 
<![endif]-->

<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->

<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->

<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->

Where special commands:

gt: greater than
gte: greater than or equal to
lt: less than
lte: less than or equal to

Posted on July 27, 2008 by

Comments