CSS hack

CSS Hack大致有3種表現(xiàn)形式:

1,屬性前綴法(即類內(nèi)部Hack):例如 IE6能識(shí)別下劃線"_"和星號(hào)" * ",IE7能識(shí)別星號(hào)" * ",但不能識(shí)別下劃線"_",IE6~IE10都認(rèn)識(shí)"\9",但firefox前述三個(gè)都不能認(rèn)識(shí)。

2,選擇器前綴法(即選擇器Hack):例如 IE6能識(shí)別*html .class{},IE7能識(shí)別*+html .class{}或者*:first-child+html .class{}。

3,IE條件注釋法(即HTML條件注釋Hack):針對(duì)所有IE(注:IE10+已經(jīng)不再支持條件注釋): ,針對(duì)IE6及以下版本: 。這類Hack不僅對(duì)CSS生效,對(duì)寫在判斷語句里面的所有代碼都會(huì)生效。

CSS hack書寫順序,一般是將適用范圍廣、被識(shí)別能力強(qiáng)的CSS定義在前面

方式一:條件注釋法

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

只在IE下生效

<!--[if IE]>

這段文字只在IE瀏覽器顯示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

這段文字只在IE6瀏覽器顯示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

這段文字只在IE6以上(包括IE6)版本IE瀏覽器顯示

<![endif]-->

只在IE8上不生效

<!--[if ! IE]>

這段文字只在非IE8瀏覽器顯示

<![endif]-->

非IE瀏覽器生效

<!--[if !IE]>

這段文字只在非IE瀏覽器顯示

<![endif]-->

方式二:類內(nèi)屬性前綴法

屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴,以達(dá)到預(yù)期的頁(yè)面展現(xiàn)效果

各種寫法:

*color ?, ?+color ?, ? -color ?, ? _color ?, ?#color ? , ? color: red\0 ? , ? ?color: red\9\0 ? ?, ? color: blue!important; color:green;

在標(biāo)準(zhǔn)模式中

“-″減號(hào)是IE6專有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack

“\9\0″ 只對(duì)IE9/IE10生效,是IE9/10的hack

方式三:選擇器前綴法

選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack

目前最常見的是

*html *前綴只對(duì)IE6生效

*+html *+前綴只對(duì)IE7生效

@media screen\9{...}只對(duì)IE6/7生效

@media \0screen {body { background: red; }}只對(duì)IE8有效

@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效

@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效

CSS3選擇器結(jié)合JavaScript的Hack

我們用IE10進(jìn)行舉例:

由于IE10用戶代理字符串(UserAgent)為:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0),所以我們可以使用JavaScript將此屬性添加到文檔標(biāo)簽中,再運(yùn)用CSS3基本選擇器匹配。

JavaScript代碼:

var htmlObj = document.documentElement;

htmlObj.setAttribute('data-useragent',navigator.userAgent);

htmlObj.setAttribute('data-platform', navigator.platform );

CSS3匹配代碼:

html[data-useragent*='MSIE 10.0'] #id { color: #F00; }

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容