前端面試題-CSS Hack

1、CSS Hack的概念

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要 針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式。

咱們把針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!

2、CSS Hack的原理

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

3、CSS Hack的分類

3.1 CSS 屬性前綴法（即類內部 Hack）

（1）IE6 能識別下劃線" _ "和星號" * "

（2）IE7 能識別星號" * "，但不能識別下劃線" _ "

（3）IE6~IE10 都識別" \9 "

（4）firefox 前述三個都不能識別。

3.2 選擇器前綴法（即選擇器 Hack）

（1）IE6 能識別 *html .class{}

（2）IE7 能識別 *+html .class{} 或 *:first-child+html .class{}

3.3 IE條件註釋法（即 HTML 頭部引用 if IE Hack）

（1）全部 IE (注：IE10+ 已經再也不支持條件註釋)能識別 <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->

（2）IE6及如下版本能識別 <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->
這類 Hack 不只對 CSS 生效，對寫在判斷語句裏面的全部代碼都會生效。

（3）實際項目中 CSS Hack 大部分是針對 IE 瀏覽器不一樣版本之間的表現差別而引入的。

4、CSS Hack書寫順序

通常是將適用範圍廣、被識別能力強的 CSS 定義在前面。

5、CSS Hack IE條件註釋法

這種方式是 IE 瀏覽器專有的 Hack 方式，微軟官方推薦使用的 hack 方式。

5.1 只在 IE 生效

<!--[if IE]>
    這段文字只在 IE 瀏覽器顯示
<![endif]-->

5.2 只在 IE6 生效

<!--[if IE 6]>
    這段文字只在 IE6 瀏覽器顯示
<![endif]-->

5.3 只在 IE6+ 生效

<!--[if gte IE 6]>
    這段文字只在 IE6以上(包括) 瀏覽器顯示
<![endif]-->

5.4 只在 IE8 不生效

<!--[if ! IE 8]>
    這段文字只在 非IE8 瀏覽器顯示
<![endif]-->

5.5 非 IE 瀏覽器生效

<!--[if ! IE]>
    這段文字只在 非IE 瀏覽器顯示
<![endif]-->

6、CSS Hack 類內部屬性前綴法

屬性前綴法是在 CSS 樣式屬性名前加上一些只有特定瀏覽器才能識別的 hack 前綴，以達到預期的頁面展示效果。

6.1 IE瀏覽器各版本 CSS hack 對照表

hack	寫法	實例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	綠色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黃色	Y	Y	N	N	N	N	N	N	N	N
_	_color	藍色	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
0	color:red0	紅色	N	N	N	N	Y	N	Y	N	Y	N
90	color:red90	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

6.2 IE瀏覽器標準模式

（1）「 - ″IE6 生效，專有的 hack

（2）「 \9 ″ IE6 / IE7 / IE8 / IE9 / IE10 都生效

（3）「 \0 ″ IE8 / IE9 / IE10 都生效

（4）「 \9\0 ″ IE9 / IE10 生效

7、CSS Hack 選擇器前綴法

選擇器前綴法是針對頁面表現不一致或者須要特殊對待的瀏覽器，在 CSS 選擇器前加上只有某些特定瀏覽器才能識別的前綴進行 hack。

閱讀更多