前端面試題-CSS Hack

WEBING發表於2019-02-16

一、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)“

相關文章