Check ie version for css style sheel

IE有多麻煩不用我多說了,以下我轉貼了一些檢查IE VERSION的方式,以便正確地針對各個VERSION去設定CSS.

Target ALL VERSIONS of IE

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="all-ie-only.css" />

<![endif]—>

Target everything EXCEPT IE

<!--[if !IE]>

<link rel="stylesheet" type="text/css" href="not-ie.css" />

<![endif]—>

Target IE 7 ONLY

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="ie7.css">

<![endif]—>

Target IE 6 ONLY

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="ie6.css" />

<![endif]—>

Target IE 5 ONLY

<!--[if IE 5]>

<link rel="stylesheet" type="text/css" href="ie5.css" />

<![endif]—>

Target IE 5.5 ONLY

<!--[if IE 5.5000]>

<link rel="stylesheet" type="text/css" href="ie55.css" />

<![endif]—>

Target IE 6 and LOWER

<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />

<![endif]—>

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />

<![endif]—>

Target IE 7 and LOWER

<!--[if lt IE 8]>

<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />

<![endif]—>

<!--[if lte IE 7]>

<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />

<![endif]—>

Target IE 8 and LOWER

<!--[if lt IE 9]>

<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />

<![endif]—>

<!--[if lte IE 8]>

<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />

<![endif]—>

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>

<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />

<![endif]—>

<!--[if gte IE 6]>

<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />

<![endif]—>

Target IE 7 and HIGHER

<!--[if gt IE 6]>

<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />

<![endif]—>

<!--[if gte IE 7]>

<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />

<![endif]—>

Target IE 8 and HIGHER

<!--[if gt IE 7]>

<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />

<![endif]—>

<!--[if gte IE 8]>

<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />

<![endif]—>

注意,以下方式可以將IE6的CSS計算方式標準化:

<!--[if !IE 6]><!-->

  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />

<!--<![endif]-->

<!--[if gte IE 7]>

  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />

<![endif]-->

<!--[if lte IE 6]>

  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />

<![endif]—>

IE-7 ONLY

* html #div {

    height: 300px;

}

NON IE-7 ONLY:

#div {

   _height: 300px;

}

Hide from IE 6 and LOWER:

#div {

   height/**/: 300px;

}

html > body #div {

      height: 300px;

}

At a Glance:
#someElement {
background: red; /* modern browsers */
*background: green; /* IE 7 and below */
_background: yellow; /* IE6 exclusively */
}

沒有留言: