__x__(48)0910第六天__CSS Hack

CSS Hack：

不到萬不得已，不要使用。不易於維護。

有一些狀況，須要一段特殊代碼在遇到特殊瀏覽器環境才執行，而在其餘條件下，不執行。

此時，CSS Hack 就能實現。

---

 

CSS Hack 實際上指的是一段特殊的代碼，這段代碼只在特定的瀏覽器環境下識別並執行。

 

---

寫法：

條件Hack只對IE9及以,下的瀏覽器有效，其餘瀏覽器視爲註釋

<!--[if <關鍵字>? IE <版本>?]>

 

<![end]-->

關鍵字：

""    是否爲

"gt"    大於

"gte"    大於等於

"lt"    小於

"lte"    小於等於

"!"    不是

 

---

 

<!--[if IE 8]>

 <p>當前瀏覽器爲IE8 ！<p>

<![end]-->

 

---

 

<!--[if lte IE 7]>

<p>您的環境爲IE7及如下 ！</p>

<![end]-->

    <!--條件Hack-->
    <!--[if IE 6]>
        <!-- 引入外部js文件 -->
        <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
        
        <!-- 寫js處理 -->
        <script type="text/javascript">
            DD_belatedPNG.fix("div,body");    // 修復div的圖片顯示,能夠寫*代替，可是會影響性能。
        </script>
    <![end]-->

 

---

屬性級Hack

假設 color 屬性，在 IE6 須要設置成 red，可是在其餘須要設置成 blue

_樣式        IE6 及如下瀏覽器執行。

*樣式        IE7 及如下瀏覽器執行。

color: red\9;        IE6 及以上的瀏覽器執行。

color: red\0;        IE8 及以上的 或者 Oprea15如下的瀏覽器執行。

*{

 

}

---

 

選擇符級Hack

IE6

* html body{

background-color: red;

}

 

IE7

*+html body{

background-color: red;

}

 

IE8+ 或 非IE

body:lang{

background-color: red;

}

 

IE9+ 或 非IE

body:nth-child(1){

background-color: red;

}