__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;

}

---