CSS HACK技術以及如何解決瀏覽器兼容性

一、處理兼容性？：針對不同的瀏覽器編寫不同的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：對選擇器內部的屬性或者值，增加前綴或後綴的方式

hack	寫法	IE6	IE7	IE8	IE9	IE10
*	*color	√	√
+	+color	√	√
-	-color	√
_	_color	√
#	color	√	√
\0	color\0			√	√	√
\9\0	color\9\0				√	√
!important	color:blue!important;		√	√	√	√

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等）