一、CSS Hack的概念
由于不同廠商的流覽器或某閱讀器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),對(duì)CSS的支持、解析不一樣,招致在不同閱讀器的環(huán)境中呈現(xiàn)出不分歧的頁(yè)面展示效果。這時(shí),我們?yōu)榱巳〉媒y(tǒng)一的頁(yè)面效果,就需求針對(duì)不同的閱讀器或不同版本寫(xiě)特定的CSS款式。
我們把針對(duì)不同的閱讀器/不同版本寫(xiě)相應(yīng)的CSS code的過(guò)程,叫做CSS hack!
二、CSS Hack的原理
由于不同的閱讀器和閱讀器各版本對(duì)CSS的支持及解析結(jié)果不一樣,以及CSS優(yōu)先級(jí)對(duì)閱讀器展示效果的影響,我們能夠據(jù)此針對(duì)不同的閱讀器情形來(lái)應(yīng)用不同的CSS。
三、CSS Hack的分類
3.1 CSS 屬性前綴法(即類內(nèi)部 Hack)
(1)IE6 能辨認(rèn)下劃線" _"和星號(hào)" *"
(2)IE7 能辨認(rèn)星號(hào)" *",但不能辨認(rèn)下劃線" _ "
(3)IE6~IE10 都辨認(rèn)" 9 "
(4)firefox 前述三個(gè)都不能辨認(rèn)。
3.2 選擇器前綴法(即選擇器 Hack)
(1)IE6 能辨認(rèn) *html .class{}
(2)IE7 能辨認(rèn) *+html .class{} 或 *:first-child+html .class{}
3.3 IE條件注釋法(即 HTML 頭部援用 if IE Hack)
(1)一切 IE (注:IE10+ 曾經(jīng)不再支持條件注釋)能辨認(rèn) <!--[if IE]>IE閱讀器顯現(xiàn)的內(nèi)容 <![endif]-->
(2)IE6及以下版本能辨認(rèn) <!--[if lt IE 6]>只在IE6-顯現(xiàn)的內(nèi)容 <![endif]-->
這類 Hack 不只對(duì) CSS 生效,對(duì)寫(xiě)在判別語(yǔ)句里面的一切代碼都會(huì)生效。
(3)實(shí)踐項(xiàng)目中 CSS Hack 大局部是針對(duì) IE 閱讀器不同版本之間的表現(xiàn)差別而引入的。
四、CSS Hack書(shū)寫(xiě)次第
普通是將適用范圍廣、被辨認(rèn)才能強(qiáng)的 CSS 定義在前面。
五、CSS Hack IE條件注釋法
這種方式是 IE 閱讀器專有的 Hack 方式,微軟官方引薦運(yùn)用的 hack 方式。
5.1 只在 IE 生效
<!--[if IE]> 這段文字只在 IE 閱讀器顯現(xiàn)<![endif]-->
5.2 只在 IE6 生效
<!--[if IE 6]> 這段文字只在 IE6 閱讀器顯現(xiàn)<![endif]-->
5.3 只在 IE6+ 生效
<!--[if gte IE 6]> 這段文字只在 IE6以上(包括) 閱讀器顯現(xiàn)<![endif]-->
5.4 只在 IE8 不生效
<!--[if ! IE 8]> 這段文字只在 非IE8 閱讀器顯現(xiàn)<![endif]-->
5.5 非 IE 閱讀器生效
<!--[if ! IE]> 這段文字只在 非IE 閱讀器顯現(xiàn)<![endif]-->
六、CSS Hack 類內(nèi)部屬性前綴法
屬性前綴法是在 CSS 款式屬性名前加上一些只要特定閱讀器才干辨認(rèn)的 hack 前綴,以到達(dá)預(yù)期的頁(yè)面展示效果。
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答