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