Pages

Tuesday, 26 March 2013

针对IE6、IE7、IE8的CSS “hacks”

IE浏览器在网页设计及开发界中最让人头痛的一件事情就是兼容性问题,IE浏览器的历史太悠久了,特别是旧版本的IE,以前人们都说它们好用、安全,可是,网页设计语言(比如本文所述的 CSS 语言)却在不断改进、更新,IE竟被远远地甩在了后面。对于这些改进和更新,IE没有提供更好的相应的支持,有多少人在使用微软的 Windows 系统啊,每个系统都绑定一个IE,所以不少人还在使用或者说还舍不得放弃IE,这让网页设计和开发人员着实伤透了脑筋,不得不在网页语言编写上特别是在 CSS 方面,针对各版本IE进行必要的 hacks,这让IE可以继续兼容网页语言 CSS 中出现的新特性,解决其兼容性问题。

以下是一些常见的 CSS hacks,如果你是网页设计者或自己拥有网站,在老版IE们未完全消失之前,你有必要知道的。


常用的IE6、IE7、IE8 hacks

针对IE8的hacks:
   
body{
    background-color: blue;    /* 所有浏览器 */
    background-color: red\0/;  /* IE8 */
    background-color: red\9;   /* IE8或以下 */
}

针对IE7的hacks:
   
body{
    background-color: blue;  /* 所有浏览器*/
    *background-color: red;  /* IE7或以下 */
}

针对IE6的hacks:
   
body{
    background-color: blue; /* 所有浏览器*/
    _background-color: red; /* IE6 */
}
最有效的IE hack是使用条件语句

针对所有版本IE的hacks:
   
  <!--[if IE]>
    <style>
        /* 针对所有版本IE的CSS */
    </style>
<![endif]-->

仅针对IE6:
   
  <!--[if IE 6]>
    <style>
        /* 针对IE 6 的CSS*/
    </style>
<![endif]-->

IE6或以上版本:
   
<!--[if gte IE 6]>
    <style>
         /* 针对IE 6或以上版本的CSS */
    </style>
<![endif]-->

IE8或以下版本:
   
<!--[if lte IE 8]>
    <style>
         /* 针对IE 8或以下版本的CSS */
    </style>
<![endif]-->