__x__(48)0910第六天__CSS Hack

CSS Hack：

不到万不得已，不要使用。不易于维护。

有一些状况，须要一段特殊代码在遇到特殊浏览器环境才执行，而在其余条件下，不执行。

此时，CSS Hack 就能实现。

---

 

CSS Hack 实际上指的是一段特殊的代码，这段代码只在特定的浏览器环境下识别并执行。

 

---

写法：

条件Hack只对IE9及以,下的浏览器有效，其余浏览器视为注释

<!--[if <关键字>? IE <版本>?]>

 

<![end]-->

关键字：

""    是否为

"gt"    大于

"gte"    大于等于

"lt"    小于

"lte"    小于等于

"!"    不是

 

---

 

<!--[if IE 8]>

 <p>当前浏览器为IE8 ！<p>

<![end]-->

 

---

 

<!--[if lte IE 7]>

<p>您的环境为IE7及如下 ！</p>

<![end]-->

    <!--条件Hack-->
    <!--[if IE 6]>
        <!-- 引入外部js文件 -->
        <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
        
        <!-- 写js处理 -->
        <script type="text/javascript">
            DD_belatedPNG.fix("div,body");    // 修复div的图片显示,能够写*代替，可是会影响性能。
        </script>
    <![end]-->

 

---

属性级Hack

假设 color 属性，在 IE6 须要设置成 red，可是在其余须要设置成 blue

_样式        IE6 及如下浏览器执行。

*样式        IE7 及如下浏览器执行。

color: red\9;        IE6 及以上的浏览器执行。

color: red\0;        IE8 及以上的 或者 Oprea15如下的浏览器执行。

*{

 

}

---

 

选择符级Hack

IE6

* html body{

background-color: red;

}

 

IE7

*+html body{

background-color: red;

}

 

IE8+ 或 非IE

body:lang{

background-color: red;

}

 

IE9+ 或 非IE

body:nth-child(1){

background-color: red;

}