CSS Hack，csshack

CSS Hack，csshack
摘要：

      在我們製作頁面時CSS hack由於不同的瀏覽器，比如Internet Explorer,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致產生的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。

　　CSS Hack大致有3種表現形式，屬性級Hack、選取器Hack以及IE條件Hack

注意：儘可能減少對CSS Hack的使用。

 

原理：

　　由於不同的瀏覽器對CSS的支援及解析結果不一樣，還由於CSS中的優先順序的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。

實際應用：　　　　文法：

　　　　　　　　selector{<hack>property:value;}或者selector{property:value<hack>;}

　　　　取值：

　　　　　　　　_：選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用底線（_）更為合適。

　　　　　　　　*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高

　　　　　　　　\9：選擇IE6+，可以區別所有IE和FireFox。

　　　　　　　　\0：選擇IE8+和Opera

　　　　　　　　[;property:value;];：選擇webkit核心瀏覽器（Chrome,Safari）。IE7及以下也能識別。中括弧內外的3個分號必須保留，第一個分號前可以是任意規則或任意多個規則

　　　　　　　　　　　　　　　　[;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價的。生效的始終是中括弧內的最後一條規則，所以通常選用第一種寫法最為簡潔。

　　　　　注意：!important並不是一個hack手段，他是被用來改變css的優先順序的，因為ie6是不識別!important,所以就被拿來當做css hack的一種，這是錯誤的。

　　　　說明： 　　　　選擇不同的瀏覽器及版本

• •   瀏覽器優先順序別:FF<IE9<IE8<IE7<IE6,CSS hack書寫順序一般為FF IE9 IE8 IE7 IE6
  • 一些CSS Hack由於瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。如下面這個例子：
  • 如想同一段文字在IE6,7,8顯示為不同顏色，可這樣寫：

    • .test{color:#090\9; /* For IE8+ */*color:#f00;  /* For IE7 and earlier */_color:#ff0;  /* For IE6 and earlier */}

      　　* 上述Hack均需運行在標準模式下，若在怪異模式下運行，這些Hack將會被不同版本的IE相互識別，導致失效。

HACK Demo:

　　

 1 .demo{color:#f1ee18;/*所有識別*/ background-color:#00deff\9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1/*IE6識別*/}  2  3 @media screen and (-webkit-min-device-pixel-ratio:0){.demo{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */ 4 @media all and (min-width: 0px){ .demo{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 僅 Opera 有效 */ }{}  5  6 .demo, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 識別 */}  7 @-moz-document url-prefix(){.demo{background-color:#4eff00;/*僅 Firefox 識別 */}}  8 * +html .demo{background-color:#a200ff;}/* 僅IE7 識別 */ 9 10 /* 一般情況下 我們區分IE7 只用 +background-color 配合 _background-color 就行了 如果必須寫 .demo, x:-moz-any-link, x:default 這樣的代碼區分 Firefox3.5及以下 則謹記此寫法對IE7也有效，故在其中要再重寫一次 +background-color 或者使用 * +html .demo{background-color:blue;} 方法僅對 IE7 有效。可使用 @-moz-document url-prefix(){}方法獨立區分所有 firefox */11 12 .demo, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下 識別 */+display:none/*再區分一次IE7*/} 13 @-moz-document url-prefix(){.demo{display:block;/*僅 firefox 識別 */}} 14 @media screen and (-webkit-min-device-pixel-ratio:0){.demo{display:block;}}{} /* safari(Chrome) 有效 */ 15 @media all and (min-width: 0px){.demo{display:none\0;} /* 僅 Opera 有效 */ }{}

 

總結：

　　css hack 並不是標準的css，所以應該盡量少使用hack。

 
css hack

CSS hack 是CSS中的一種作弊手段，因為目前所有瀏覽器並沒有統一對CSS的支援，例如同樣是一個margin:1px，可能在不同的瀏覽器中出現的效果就一定是1px

在這種情況下，我們只能藉助於CSS hack來暫時過渡這個階段，CSS hack就比如是IE能認出的CSS語句，而FF不能認出，這樣就能達到我們的目的了，css hack在很多進階的技巧中出現，不過並不是很推薦使用，畢竟未來的css趨勢還不是很明了，盡量避免吧

因為很多css錯位問題其實並不是瀏覽器的錯誤，而是我們本身的編輯出現的錯誤。

關於css hack更詳細的說明，在CSS黑板報上有更詳細的

可以直接百度：CSS黑板報，第一個就是了。加油！
 
css hack

CSS hack 是CSS中的一種作弊手段，因為目前所有瀏覽器並沒有統一對CSS的支援，例如同樣是一個margin:1px，可能在不同的瀏覽器中出現的效果就一定是1px

在這種情況下，我們只能藉助於CSS hack來暫時過渡這個階段，CSS hack就比如是IE能認出的CSS語句，而FF不能認出，這樣就能達到我們的目的了，css hack在很多進階的技巧中出現，不過並不是很推薦使用，畢竟未來的css趨勢還不是很明了，盡量避免吧

因為很多css錯位問題其實並不是瀏覽器的錯誤，而是我們本身的編輯出現的錯誤。

關於css hack更詳細的說明，在CSS黑板報上有更詳細的

可以直接百度：CSS黑板報，第一個就是了。加油！