摘要:實際項目中大部分是針對瀏覽器不同版本之間的表現(xiàn)差異而引入的。四書寫順序一般是將適用范圍廣被識別能力強(qiáng)的定義在前面。五條件注釋法這種方式是瀏覽器專有的方式,微軟官方推薦使用的方式。
一、CSS Hack的概念
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),對CSS的支持、解析不一樣,導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時,我們?yōu)榱双@得統(tǒng)一的頁面效果,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式。二、CSS Hack的原理我們把針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程,叫做CSS hack!
由于不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結(jié)果不一樣,以及CSS優(yōu)先級對瀏覽器展現(xiàn)效果的影響,我們可以據(jù)此針對不同的瀏覽器情景來應(yīng)用不同的CSS。
三、CSS Hack的分類 3.1 CSS 屬性前綴法(即類內(nèi)部 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+ 已經(jīng)不再支持條件注釋)能識別
(2)IE6及以下版本能識別
這類 Hack 不僅對 CSS 生效,對寫在判斷語句里面的所有代碼都會生效。
(3)實際項目中 CSS Hack 大部分是針對 IE 瀏覽器不同版本之間的表現(xiàn)差異而引入的。
四、CSS Hack書寫順序一般是將適用范圍廣、被識別能力強(qiáng)的 CSS 定義在前面。五、CSS Hack IE條件注釋法
這種方式是 IE 瀏覽器專有的 Hack 方式,微軟官方推薦使用的 hack 方式。
5.1 只在 IE 生效 5.2 只在 IE6 生效 5.3 只在 IE6+ 生效 5.4 只在 IE8 不生效 5.5 非 IE 瀏覽器生效 六、CSS Hack 類內(nèi)部屬性前綴法屬性前綴法是在 CSS 樣式屬性名前加上一些只有特定瀏覽器才能識別的 hack 前綴,以達(dá)到預(yù)期的頁面展現(xiàn)效果。
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 | 藍(lán)色 | 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 |
(1)“ - ″IE6 生效,專有的 hack
(2)“ 9 ″ IE6 / IE7 / IE8 / IE9 / IE10 都生效
(3)“