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; }