IE条件注释与CSS Hacks(备记)-优快云博客

本文链接：https://blog.youkuaiyun.com/s10241024s/article/details/83977381

IE条件注释与CSS Hacks »

Written by Rainbow On 2010-03-02 With 2 Comments

我们知道，IE6的存在，因其预装于目前市场占有率最大的 Windows XP 操作系统。对于老态龙钟的IE6，说拜拜还需要很长的时间。
IE虽然给我们网页设计师，带来了不少多麻烦，还好，IE条件注释，给我们解决浏览器兼容问题带来了一个很好的方法。

一、什么是IE条件注释？

IE条件注释，顾名思义就是使用IE特有的条件语句来显示代码块。

这些巧妙的逻辑片段只能被IE浏览器所支持，其它的浏览器理解为纯粹的HTML注释，不起任何作用。条件注释在IE5中首次出现，并且得到了 Widnows浏览器所有后续版本的支持。IE条件注释及其有效，而且非常容易记住。通过这些技巧，我们可以为基于Windows的IE5、6、7、8添加一些特殊的行为。这样做的好处是，HTML和CSS代码可以通过验证。主要的缺点是这些注释需要放在HTML页面中，而不是放在CSS中。这样，当你不需要这些东西，或者有所更改的时候，就需要维护很多的地方。好处是通过这种方式使用条件注释，可以很轻松的管理项目中的目标浏览器，并使得CSS补丁文件保持独立自由。更重要的是它帮助我们优化了 CSS样式表，保证了主要样式表的干净，这对于大型网站来说就很重要了，也许你还没有感觉到它的可爱之处。

作为有Web标准意识的开发者，我们始终应该首先在大部分现有的兼容标准的浏览器上测试我们的设计，然后再为那些稍作细微修改就能回到正轨的浏览器提供补丁。

二、条件注释使用方法

条件注释属性

gt : greater than，选择条件版本以上版本，不包含条件版本
lt : less than，选择条件版本以下版本，不包含条件版本
gte : greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
! : 选择条件版本以外所有版本，无论高低

The Code

我们概括性地说明一下你如何使用条件注释，首先，我们应该把你所有的CSS 等CSS文件放在中。条件注释的基本结构和HTML的注释()是一样的。因此，IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

Target ALL VERSIONS of IE（所有的IE可识别）

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

Target everything EXCEPT IE （除IE外都可识别）

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

Target IE 7 ONLY （仅IE7可识别）

1	`<!--[ if IE 7 ] > <link rel= "stylesheet" type= "text/css" href= "ie7.css" > <![ endif] -->`

Target IE 6 ONLY（仅IE6可识别）

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

Target IE 5 ONLY（仅IE5.0与IE5.5可以识别）

1	`<!--[ if IE 5 ] > <link rel= "stylesheet" type= "text/css" href= "ie5.css" /> <![ endif] -->`

Target IE 5.0 ONLY (只有IE5.0可以识别 )

Target IE 5.5 ONLY（只有IE5.0可以识别）

1	`<!--[ if IE 5.5000 ] > <link rel= "stylesheet" type= "text/css" href= "ie55.css" /> <![ endif] -->`

Target IE 6 and LOWER（IE6和IE6以下的）

1	`<!--[ if lt IE 7 ] > <link rel= "stylesheet" type= "text/css" href= "ie6-and-down.css" /> <![ endif] -->`

1	`<!--[ if lte IE 6 ] > <link rel= "stylesheet" type= "text/css" href= "ie6-and-down.css" /> <![ endif] -->`

Target IE 7 and LOWER（IE7和IE7以下的）

1	`<!--[ if lt IE 8 ] > <link rel= "stylesheet" type= "text/css" href= "ie7-and-down.css" /> <![ endif] -->`

1	`<!--[ if lte IE 7 ] > <link rel= "stylesheet" type= "text/css" href= "ie7-and-down.css" /> <![ endif] -->`

Target IE 8 and LOWER（IE8和IE8以下的）

1	`<!--[ if lt IE 9 ] > <link rel= "stylesheet" type= "text/css" href= "ie8-and-down.css" /> <![ endif] -->`

1	`<!--[ if lte IE 8 ] > <link rel= "stylesheet" type= "text/css" href= "ie8-and-down.css" /> <![ endif] -->`

Target IE 6 and HIGHER（IE6和IE6以上的）

1	`<!--[ if gt IE 5.5 ] > <link rel= "stylesheet" type= "text/css" href= "ie6-and-up.css" /> <![ endif] -->`

1	`<!--[ if gte IE 6 ] > <link rel= "stylesheet" type= "text/css" href= "ie6-and-up.css" /> <![ endif] -->`

Target IE 7 and HIGHER（IE7和IE7以上的）

1	`<!--[ if gt IE 6 ] > <link rel= "stylesheet" type= "text/css" href= "ie7-and-up.css" /> <![ endif] -->`

1	`<!--[ if gte IE 7 ] > <link rel= "stylesheet" type= "text/css" href= "ie7-and-up.css" /> <![ endif] -->`

Target IE 8 and HIGHER（IE8和IE8以上的）

1	`<!--[ if gt IE 7 ] > <link rel= "stylesheet" type= "text/css" href= "ie8-and-up.css" /> <![ endif] -->`

1	`<!--[ if gte IE 8 ] > <link rel= "stylesheet" type= "text/css" href= "ie8-and-up.css" /> <![ endif] -->`

Universal IE 6 CSS（通用的IE 6样式）

处理IE 6和IE6以下的版本始终是一个超特殊的挑战。老态龙钟的IE6，还保持着高额的市场占有率，还不能彻底的放弃它，不然会有许多的客户抱怨我们。不过也有些人正在放弃对它的支持，包括大企业，大型网络应用，甚至政府。有一个不失落的，不放弃的解决办法，那就是使用一个特精简的样式 universal IE 6 CSS .，然后为IE 7和以上（和所有其他浏览器）的应用常规的CSS。

1
2
3

<!--[
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]
-->

IE6/IE7/FF的CSS Hacks

1.区别IE和非IE浏览器

#tip
 {

    background
:
blue
;
 /*非IE 背景藍色*/

    background
:
red
 \9
;
 /*IE6、IE7、IE8背景紅色*/

}

2.区别IE6,IE7,IE8,FF

【区别符号】：「\9」、「*」、「_」

【示例】：

#ue
{
 /*Firefox 背景变蓝色*/

    background
:
red
 \9
;
 /*IE8 背景变红色*/

    *
background
:
black
;
 /*IE7 背景变黑色*/

    _background:
orange;
 /*IE6 背景变橘色*/

}

【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (方法 1)

【区别符号】：「*」、「_」

【示例】：

#tip
 {

    background
:
blue
;
 /*Firefox背景变蓝色*/

    *
background
:
black
;
 /*IE7 背景变黑色*/

    _background:
orange;
 /*IE6 背景变橘色*/

}

【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox。

4.区别IE6、IE7、Firefox (方法 2)

【区别符号】：「*」、「!important」

【示例】：

#tip
 {

    background
:
blue
;
 /*Firefox 背景变蓝色*/

    *
background
:
green
 !important;
 /*IE7 背景变绿色*/

    *
background
:
orange;
 /*IE6 背景变橘色*/

}

【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox

【区别符号】：「*」、「!important」

【示例】：

#tip
 {

    background
:
blue
;
 /*Firefox 背景变蓝色*/

    *
background
:
green
 !important;
 /*IE7 背景变绿色*/

}

【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (方法 1)

【区别符号】：「*」、「_」

【示例】：

#tip
 {

    *
background
:
black
;
 /*IE7 背景变黑色*/

    _background:
orange;
 /*IE6 背景变橘色*/

    }

【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、IE7 (方法 2)

【区别符号】：「!important」

【示例】：

#tip
 {

    background
:
black
 !important;
 /*IE7 背景变黑色*/

    background
:
orange;
 /*IE6 背景变橘色*/

}

【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

8.区别IE6、Firefox

【区别符号】：「_」

【示例】：

#tip
 {

    background
:
black
;
 /*Firefox 背景变黑色*/

    _background:
orange;
 /*IE6 背景变橘色*/

}

【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。

9. IE-6 ONLY

1	`* html #div { height : 300px ; }`

10. NON IE-7 ONLY:

1	`#div { _height: 300px ; }`

11. Hide from IE 6 and LOWER:

1	`#div { height /**/ : 300px ; }`

1	`html > body #div { height : 300px ; }`

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

/* Opera */
  
html:first-child 
#opera
  {
  display
:
 block
;
  }
  
/* IE 7 */
 
*
:first-child
+
html{
background-color
:
#F00
;
}

/* IE 7 */
 
 html >
 body #ie7
  {
  *
display
:
 block
;
  }
  
/* IE 6 */
 
*
 html #div
{
 background-color
:
#F00
;
}

/* IE 6 */
 
 body #ie6
  {
  _display:
 block
;
  }
 
 
/*IE7及其更低版本*/

*
:first-child
+
html{
}
*
html{
}

 
/*IE7,IE7以上和主流浏览器*/

html>
body{
}

 
/*适合主流浏览器(IE7排除在外，IE7以下的也不行)*/
 
html>
/**/
body{
}

/* Firefox 1 - 2 */
 
 body:empty 
#firefox12
  {
  display
:
 block
;
  }
  
/* Firefox */
  @-moz-document url-prefix()  {  #firefox { display: block; }  } 

/* Safari */
  @media screen and (-webkit-min-device-pixel-ratio:0)  {  #safari { display: block; }  } 

/* Opera */
  @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)  {  head~body #opera { display: block; }  }