總結一下本人在IE6、IE7下使用的CSS Hack寫法，以防哪天又遇到需要相容IE6、7的任務。

一 CSS Hack

由於不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支援、解析不一樣，導致同樣的CSS在不同瀏覽器的環境中呈現出不一致的頁面展現效果。

這時為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，把針對不同的瀏覽器/不同版本寫相應的CSS程式碼的過程，叫做CSS Hack

• 屬性字首法(即類內部Hack)：例如 IE6能識別下劃線”_“和星號” *

“，IE7能識別星號” * “和加號”+“，但不能識別下劃線”_”，IE6~IE9都認識”\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生效，對寫在判斷語句裡面的所有程式碼都會生效。

根據這張圖先給出結論：

IE6識別 * 、_ 、\9
IE7識別 * 、+、\9
IE8識別 \9、\0
上述幾種符號在FireFox上、Chrome都不識別
（IE各版本在標準和怪異模式下可識別的字首詞請參考：http://blog.csdn.net/freshlover/article/details/12132801）

第一和第二種CSS Hack方式都可以使用此結論。

下面我們用例子說明

<style>
/*選擇器字首法*/
#cshk{ height
 
:20px; }//所有瀏覽器都識別
*html #cshk {height:50px; }//僅IE6識別
*+html #cshk {height:80px; }//僅IE7識別

/*屬性字首法*/
#color{
    /*書寫順序為所有瀏覽器的樣式在最前，其次是IE8、IE7，最後是IE6。     
*/
      color:red;//所有瀏覽器都識別
      color:blue\9;//IE9及以下均識別
      color:blue\0;//僅IE8識別
      +color:orange;//僅IE7識別
      _color:green;//僅IE6識別
 }
</style>

二 IE6下的Bug

inline-block

IE6/IE7下對display:inline-block的支援性不好。
1、inline元素的display屬性設定為inline-block時，所有的瀏覽器都支援；
2、block元素的display屬性設定為inline-block時，IE6/IE7瀏覽器是不支援的；

IE6下塊元素如何實現display:inline-block的效果？

有兩種方法：
1、 先使用display:inline-block屬性觸發塊元素，然後再定義display:inline，讓塊元素呈遞為內聯物件（兩個display 要先後放在兩個CSS宣告中才有效果，這是IE的一個經典bug，如果先定義了display:inline-block，然後再將display設回 inline或block，layout不會消失）。程式碼如下（…為省略的其他屬性內容）：

div {display:inline-block;…}
div {display:inline;}

2、直接讓塊元素設定為內聯物件呈遞（設定屬性display:inline），然後觸發塊元素的layout（如：zoom:1 或float屬性等）。程式碼如下：

div { display:inline-block; _zoom:1;_display:inline;} /*推薦IE6*/
div { display:inline-block; *zoom:1;*display:inline;} /*推薦:IE6、7*/

margin雙倍bug

注意: 該bug只會出現在IE6上。

出現這個bug需要具備三個條件：
    1、瀏覽器為IE6，大於IE6的ie系列版本和火狐等其他瀏覽器不會出現這個情況。
    2、物件設定了float屬性，如.ILeft { float: left;}
    3、物件設定了margin屬性，如.ILeft { float: left; width: 150px; margin-left: 15px}

以上的class=ILeft的層在IE6下瀏覽就會出現左邊距為30px的情況，而不是正常想象中的15px。

解決辦法是
給物件的css屬性加上 display:inline 即可解決該bug
程式碼：.ILeft { float: left; width: 150px; margin-left: 15px; display:inline}

再次重新整理網頁，在IE6下的margin雙倍的bug就消失了

參考文件