IE CSS Hack【记录】

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、条件hack

2、属性hack

3、选择器hack

CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的

本文只列举了一些常用的CSS Hack，且不考虑IE6以下的版本

尽可能减少对CSS Hack的使用，使用CSS Hack会带来维护成本的提高以及浏览器版本变化类似Hack失效等问题

1、条件hack

用于选择IE及IE不同版本，IE10及以上版本已将条件注释特性移除

<!--[if IE 8]> <![endif]--> <!-- IE8 -->

<!--[if gt IE 8]> <![endif]--> <!-- IE9+ -->

<!--[if gte IE 8]> <![endif]--> <!-- IE8+ -->

<!--[if lt IE 8]> <![endif]--> <!-- IE7- -->

<!--[if lte IE 8]> <![endif]--> <!-- IE8- -->

<!--[if ! IE 8]> <![endif]--> <!-- !IE8 -->

条件hack是HTML级别的（不仅是CSS的hack，还可以选择HTML代码块）

<!--[if IE]>

    <link rel="stylesheet" href="css/global.css">

    <style>

        p{ color:#f00; }

    </style>

    <p>你在非IE中将看不到我的身影</p>

<![endif]-->

2、属性hack

属性hack需运行在标准模式下，若在怪异模式下运行，将会被不同版本的IE相互识别，导致失效

由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现

element {

    color: #fff;

    color: #fff\0; /* IE8+ */

    color: #fff\9; /* IE10- */

    color: #fff\9\0; /* IE9、IE10 */

    color: #fff\0/; /* IE8 */

    *color: #fff; /* IE7- */

    _color: #fff; /* IE6- */

}

3、选择器hack

选择器hack与属性hack一样，需运行在标准模式下，通过层层覆盖的方式来实现

*html element{} /* IE6- */

*+html element{} /* IE7 */

@media screen\9{} /* IE7- */

@media \0screen{} /* IE8 */

@media \0screen\,screen\9{} /* IE8- */

@media screen\0{} /* IE8+ */

@media screen and (min-width:0\0){} /* IE9+ */

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){} /* IE10+ */