一、處理相容性？：針對不同的瀏覽器編寫不同的css。
二、標準模式與混雜模式

• IE6之前，不同瀏覽器之間沒有相容性而言
• 瀏覽器執行模式
  
  • 混雜
  • 標準
  • 非標準
• 觸發混雜模式
  不宣告DOCTYPE
  
  • 會預設使用IE5.5來薰染頁面
• 不同模式下，瀏覽器對CSS 和JS解析效果不同

三、什麼是CSS HACK?
瀏覽器的型別及版本的不同會造成CSS效果渲染不同。
四、瀏覽器相容性
1、瀏覽器的型別及版本不同，會造成CSS效果解析不同，通過CSS HACK來解決。
2、相容性問題

• body的margin和padding
  
  • IE的預設margin和padding大
  • 解決方案：統一設定body 的margin和padding
• 居中佈局
  
  • 在IE低版本中，對父元素設定text-align:center可以控制所有元素居中；其他瀏覽器中，塊級元素居中要使用margin:0 auto;
  • 解決方案：統一通過設定margin:0 auto;實現居中
• 元素的高度和內容
  
  • 在IE低版本中，元素的高度至少包含內容；其他瀏覽器中，內容超出高度後，溢位顯示
  • 解決方案：設定overflow:hidden;
• 子元素設定上外邊距時，其實是設定在了父元素上
  
  • 解決方案：
    
    • 設定父元素邊框
    • 通過父元素的padding-top來解決
    • 內容生成（IE低版本除外）
      3、CSS HACK解決瀏覽器相容性問題
      （1）CSS HACK原理：通過CSS的優先順序解決
      （2）CSS HACK方式：
      ① CSS類內部HACK：對選擇器內部的屬性或者值，增加字首或字尾的方式

background-color:red;      //通用
background-color: yellow\0;//8 9 10 --->8
background-color: pink\9\0;//9 10
*background-color: green; //6 7 -->7
_background-color: blue;  //6

②選擇器HACK：為選擇器新增字首，去匹配不同的瀏覽器

• *字首：IE6
• *+字首：IE7
• @media screen\9{……} 對IE6 IE7有效

③HTML頭部引入HACK：IE條件註釋
IE根據if條件來判斷是否解析條件註釋裡面的內容

• gt：greater than 選擇條件版本以上版本，不包括條件版本
• lt:less than 選擇條件版本以下版本，不包括條件版本
  
  • eg:gt IE6：選擇大於IE6以上的瀏覽器
• gte:greater than equal 選擇條件版本以上版本，包括條件版本
• lte:less than equal 選擇條件版本以下版本，包括條件版本
• ! 選擇條件版本以外的所有版本，無論高低。

// 條件註釋語法
<!--[if gt IE6]>
//該段內容只被IE6以上的瀏覽器解析
<![endif] -->

五、如何解決瀏覽器相容性（面試題）？
1、html,css,js程式碼，全部為標準模式
2、針對不支援的屬性，需要通過瀏覽器字首來解決

• -webkit- : chrome、Safari
• -moz- ： Firefox
• -o- ： opera
• -ms- ： Microsoft IE

3、針對微軟IE的低版本瀏覽器，通過CSS HACK方式
（1）CSS類內部Hack

 - IE8、9、10：\0
 - IE9、10：\9\0
 - IE7:* , + , #
 - IE6:_ , -
 - 

（2）選擇器Hack

• *字首
• *+字首
• @media screen{}

（3）頭部引入Hack

• 通過IE的條件註釋引入不同的CSS檔案

4、主流瀏覽器的主流版本

• 通過響應的CSS框架來解決。（bootstrap等）