CSS hack方式

一、css hack是什么？

百度百科是這樣解釋的：CSS hack是由於不同廠商的瀏覽器，比如IE,Safari,Firefox,Chrome,opera等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，它們對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。

二、原理

由於不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不一樣，以及CSS優先級對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS樣式。

三、分類

CSS Hack大致有3種表現形式：CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

• 屬性前綴法(即css類內部Hack)：例如 IE6能識別下划線"_"和星號" * "，IE7能識別星號" * "，但不能識別下划線"_"，IE6~IE10都認識"\9"，但firefox對於前述三個都不能識別等等。
• 選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
• IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。

上面一大串內容說得太官方，簡單地說：CSS hack 常用的方式有三種，CSS 內部hack、選擇器hack、HTML 頭部引用，其中 CSS 內部hack 最常用。注意一點就是：CSS hack的書寫順序一般是先將適用范圍廣、被識別能力強的CSS定義在前面，把一些特殊的，范圍小的CSS定義在后面，比如，firefox寫在IE7前面，而IE7寫在IE6前面以此類推。

CSS 內部 hack

由於CSS 內部 hack 最為常用，故先講一下：

CSS 內部 hack 語法是這樣的 selector{<hack>?property:value<hack>?;}，比如：

-background-color:green;

在css屬性前面加上“-”，這樣這條屬性就只有IE6能識別，當然還有加“*”，則IE6/7能識別；還有些是寫在屬性后面的：

background-color:green\9;

在后面加上“\9”，這樣只有IE瀏覽器能識別，而加上“\9\0”則只有IE9/10能識別，以此類推！

還是看圖比較直觀，這里我用Bootstrap弄個簡單的表格來展示一下：

OK，根據CSS hack 的書寫順序，這里舉個例子：

div{
        width: 300px;
        height: 300px;
        background-color: red;              /*所有瀏覽器*/
        background-color: blue\9;        /*所有IE（IE6+）*/
        background-color: green\0;      /*IE8 */
        +background-color: pink;          /*IE7*/
        _background-color: orange;      /*IE6*/
 }

如果要區分標准模式下IE6~IE10和Opera/Firefox/Chrome的hack，這里有個例子很詳細：

IE6顯示為：橘色，
IE7顯示為：粉色，
IE8顯示為：黃色，
IE9顯示為：紫色，
IE10顯示為：綠色，
Firefox顯示為：藍色，
Opera顯示為：黑色，
Safari/Chrome顯示為：灰色。  請注意書寫順序！

.hacktest{ 
      background-color:blue;      /* 都識別，此處針對firefox */
      background-color:red\9;      /*all ie*/
      background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也認識*/
     +background-color:pink;        /*for ie6/7*/
     _background-color:orange;       /*for ie6*/
}

@media screen and (min-width:0){ 
     .hacktest {background-color:black\0;}  /*opera*/
} 
@media screen and (min-width:0) { 
     .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:國外有些習慣常寫作\0，根本沒考慮Opera也認識\0的實際 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
     .hacktest { background-color:green; } /* for IE10+ 此寫法可以適配到高對比度和默認模式，故可覆蓋所有ie10的模式 */
}
@media screen and (-webkit-min-device-pixel-ratio:0){
                 .hacktest {background-color:gray;}    /*for Chrome/Safari*/
 }  

/* #963棕色 :root is for IE9/IE10, 優先級高於@media, 慎用！如果二者合用，必要時在@media樣式加入 !important 才能區分IE9和IE10 */
/*
:root .hacktest { background-color:#963\9; } 
*/

選擇器 hack

選擇器hack其實主要是針對IE瀏覽器，不常用，常用如表：

例如：

:root .test
{
           background-color:green;    /* IE9 */
}

HTML頭部引用

這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式，在非IE瀏覽器下則當做注釋視而不見。

<!--[if IE]>
       這段文字只在IE瀏覽器顯示
<![endif]-->
    
<!--[if IE 6]>
       這段文字只在IE6瀏覽器顯示
<![endif]-->
    
<!--[if gte IE 6]>
      這段文字只在IE6及以上版本IE瀏覽器顯示
<![endif]-->
    
<!--[if ! IE 8]>
        這段文字在非IE8瀏覽器顯示
<![endif]-->

<!--[if !IE]>
        這段文字只在非IE瀏覽器顯示
<![endif]-->

注意點：

lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。

lt ：就是Less than的簡寫，也就是小於的意思。

gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。

gt ：就是Greater than的簡寫，也就是大於的意思。

! ：就是不等於的意思。

 

PS：學習了CSS hack的各種技巧，不過最重要的還是要注意書寫順序，如果順序寫錯了，就達不到我們想要的效果了哦！當然，除非實際項目需要，一般還是盡量避免使用CSS hack ！

 

參考：http://www.cnblogs.com/dolphinX/p/3292630.html

參考：http://blog.csdn.net/freshlover/article/details/12132801