一、 最小高度相容IE6

方法：1、min-height:100px; height:auto!important; height:100px;

   2、min-height:100px; _height:100px;

二、 塊屬性添加了float後，又添加了橫向的margin，在IE6下比設定的值要大（即雙倍浮動的bug）

方法：給float的標籤轉換成行內元素，新增display：inline；

三、表單元素行高不一致

方法：給表單元素加float：left；或vertical-align：middle；

四、 設定較小高度的容器（<10px），在IE6下不識別

方法：overflow：hidden；

五、當在a標籤中巢狀img標籤時，某些瀏覽器中img會有藍色邊框；

方法：給img{border：0}或img{border：none}（可直接設定在公共樣式中）

六、 圖片預設有空隙

方法：1、給img標籤新增float：left；

   2、給img新增display：block;

七、父元素寬度100%，子元素寬度各為50%，在IE下元素的寬度之和大於100%

方法：給右邊浮動的子元素新增clear：right；

八、滑鼠指標bug當給連結設定指標cursor：hand；此時只有IE識別，其他瀏覽器不識別

方法：cursor：pointer；IE6以上瀏覽器及其他核心瀏覽器都識別

九、透明屬性，opacity：value；（取值範圍0-1）

方法：針對IE瀏覽器filter：alpha（opacity=value）；（取值範圍1-100）

十、去除連結虛線邊框的問題，當點選超連結後，ie6/7/8  ff會出現虛線邊框 ,而opera、safari沒有虛線邊框

方法：ie6/7中 設定為a {blr:expression_r(this.onFocus=this.blur())}

  ie8 和 ff 都不支援expression 在ie8 、ff中設定為  :focus { outline: none; }

十一、div巢狀時 y軸上 padding和 marign的問題

FF裡 y 軸上 子div 到 父div 的距離為 父padding + 子marign；

IE裡 y 軸上 子div 到 父div 的距離為 父padding 和 子marign 裡大的一個；

FF裡 y 軸上 父padding=0 且 border=0 時，子div 到 父div 的距離為0，子marign 作用到 父div 外面。

十二、ul標籤在FF中預設有padding值，在IE中只有margin

        方法：在css剛開始設定樣式ul{margin：0；padding：0}

針對這個解決方案，因為塊狀元素在瀏覽器中有預設的margin和padding值，所以在css最開始時，一般會做一個清除預設設定，即：

html,body,div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,th,hr,h1,h2,h3,h4,h5,h6,img,input{
    margin: 0;
padding:0;
}

十三、css hack

瀏覽器不同或瀏覽器版本不同對CSS的解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack，實際專案中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。下面為用過濾器（filter）的方式解決css hack的說明：

1、 下劃線屬性過濾器   {_屬性：屬性值；}

針對IE6

2、！important關鍵詞過濾器   {屬性：屬性值！important}

除IE6外，均識別。

注：必須寫在標準寫法前

3、 *過濾器   {*屬性：屬性值；}

只有IE6/IE7識別

4、\9過濾器   {屬性：屬性值\9}

IE7/IE8識別

5、\0過濾器   {屬性：屬性值\0}

IE8及以上瀏覽器

十四、當<doctype html!>未寫時，會觸發某些瀏覽器的怪異模式。

標準盒模型：content+padding+border+padding

怪異盒模型：content+margin

利用怪異盒模型，我們可以解決一個實際開發中常出現的問題，例如：商品列表中，當我們遇到排版n個div，需2個1排時，會給每個div設定padding-left/right值，width設為50%；此時每個div所佔的寬度為width+padding實際上已經超過50%了，會導致排版混亂。此時，我們利用怪異盒模型的特點來設定css樣式“box-sizing:border-box;”，此時，每個div佔的總寬度將不包括border和padding，所以橫向並排的兩個寬為50%的div佈局就OK啦，還可以保證還原原稿上兩橫排div的間距。

十五、漸進增強和優雅降級

漸進增強（ProgressiveEnhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然後再針對高階瀏覽器進行效果、互動、追加功能達到更好的體驗。

優雅降級（GracefulDegradation）：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

.box{
    /*漸進增強*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

.box{
    /*優雅降級*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}

（後期會繼續補充滴~）