CSS hack方式

1、css hack是什麼？

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

2、原理

因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景來應用不一樣的CSS樣式。

3、分類

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