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