前端面試題-CSS Hack

WEBING發表於2019-02-16
前端面試題CSS

一、CSS Hack的概念

由於不同廠商的流覽器或某瀏覽器的不同版本（如IE,Firefox/Safari/Opera/Chrome等），對CSS的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式。

我們把針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

二、CSS Hack的原理

由於不同的瀏覽器和瀏覽器各版本對CSS的支援及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。

三、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 瀏覽器不同版本之間的表現差異而引入的。

四、CSS Hack書寫順序

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

五、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]-->

六、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）“

相關文章