살아 숨 쉬는 웹 - 블루비 :: IE conditional comment hack

Conditional comment syntax

The conditional comment is just a specially formatted HTML comment that is picked up only by various flavors of Internet Explorer for Windows. You could for instance use this to apply the PNG Behavior

The following conditional comment is being picked up by IE5, IE5.5 and IE6:

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

Targeting IE5

If you need to target IE5 specifically, you do so by appending a version number:

<!--[if IE 5.0]>
  <link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->

Targeting IE5.5

If you specifically need to target IE5.5, it’d look like this:

<!--[if IE 5.5]>
  <link rel="stylesheet" type="text/css" href="ie-5.5.css" />
<![endif]-->

Targeting IE6

The same goes for IE6:

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

IE5 and IE5.5 - box model hacking

If you need to work around IE5’s broken box model, using conditional comments, you can use several alternative syntaxes.

The first syntax will apply the stylesheet to any version of IE whose version number starts with 5:

<!--[if IE 5]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Alternatively, you could say that stylesheets should be applied to any IE version whose version number is less than 6:

<!--[if IE lt 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Order

If you don’t want your IE-specific styles to be overridden by your regular stylesheet, source order is significant; you’d want to specify the common stylesheet first, with the IE-specific versions following:

<link rel="stylesheet" type="text/css" href="common.css" />
 
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
 
<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->
 
<!--[if IE lt  6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

http://www.quirksmode.org/css/condcom.html

http://virtuelvis.com/archives/2004/02/css-ie-only

CSS hacks and filters