關於CSS Hack

標籤：不同   css   未來   ie8   文檔   維護   html   ref   xpl   

        由於不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，導致產生的不是我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，在不同的瀏覽器中也能得到我們想要的頁面效果。

        簡單的說，CSS hack的目的就是使你的CSS代碼相容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定製編寫不同的CSS效果。

        啥？還木明白？就是說同一個效果你要根據不同的瀏覽器寫不同的css 代碼！現在主要就是針對IE瀏覽器了。

        原理：使用CSS屬性的優先順序來實現CSS Hack。

        CSS Hack書寫順序，一般是將適用範圍廣、被識別能力強的CSS定義在前面。

        CSS Hack的實現方式：

1、CSS 類內部Hack

        通過 屬性和值的首碼或尾碼來實現瀏覽器版本的識別。

        例如 IE6能識別底線"_"和星號" * "，IE7能識別星號" * "，但不能識別底線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。

2、選取器Hack

        在 瀏覽器前加首碼來實現不同的瀏覽器版本的識別。

    * : 識別IE6

    *+ 首碼： 識別IE7

        ex:

        *div{

        

         }

3、HTML頭部引用Hack(掌握)

 原理：使用 IE的條件注釋來完成瀏覽器版本的判斷(註：IE10+已經不再支援條件注釋)。

文法：

<!--[if 條件 IE 版本]>

滿足瀏覽器版本時要執行的操作

<![endif]-->

版本：6-10，如果省略版本號碼的話，則判斷是否為IE

<!--[if IE 6]>

只在IE6中要執行的操作

<![endif]-->

條件：

1、gt

判斷當前瀏覽器版本是否大於指定版本

2、gte

判斷當前瀏覽器版本是否大於等於指定版本

3、lt

判斷當前瀏覽器版本是否小於指定版本

4、lte

判斷當前瀏覽器版本是否小於等於指定版本

5、!

非，取反，不是

判斷當前瀏覽器版本是否不等於指定版本

6、不寫

判斷瀏覽器是否為IE或IE的指定版本

CSS hack利弊

        一般情況下，我們盡量避免使用CSS hack，但是有些情況為了顧及使用者體驗實現向下相容，不得已才使用hack。比如由於IE8及以下版本不支援CSS3,而我們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護的負擔。相信只要大家一起努力，少用、慎用hack，未來一定會促使瀏覽器廠商的標準越來越趨於統一，順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack，必將減輕我們編碼的複雜度，少做無用功。

關於CSS Hack