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+ */