IE CSS Hack【记录】

 

一、条件hack

二、属性hack

三、选择器hack

 

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

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

尽量减小对CSS Hack的使用，使用CSS Hack会带来维护成本的提升以及浏览器版本变化相似Hack失效等问题

 

一、条件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]-->

 

二、属性hack

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

因为浏览器存在交叉认识，因此须要经过层层覆盖的方式来实现

element {
    color: #fff;
    color: #fff\0; /* IE8+ */
    color: #fff\9; /* IE10- */
    color: #fff\9\0; /* IE九、IE10 */
    color: #fff\0/; /* IE8 */
    *color: #fff; /* IE7- */
    _color: #fff; /* IE6- */
}

 

三、选择器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+ */