CSS Hack大致有3種表現形式:
1,屬性前綴法(即類內部Hack):例如 IE6能識別下劃線"_"和星號" * ",IE7能識別星號" * ",但不能識別下劃線"_",IE6~IE10都認識"\9",但firefox前述三個都不能認識。
2,選擇器前綴法(即選擇器Hack):例如 IE6能識別*html .class{},IE7能識別*+html .class{}或者*:first-child+html .class{}。
3,IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經不再支持條件注釋): ,針對IE6及以下版本: 。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效。
CSS hack書寫順序,一般是將適用范圍廣、被識別能力強的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]-->
方式二:類內屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴,以達到預期的頁面展現效果
各種寫法:
*color ?, ?+color ?, ? -color ?, ? _color ?, ?#color ? , ? color: red\0 ? , ? ?color: red\9\0 ? ?, ? color: blue!important; color:green;
在標準模式中
“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效,是IE9/10的hack
方式三:選擇器前綴法
選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack
目前最常見的是
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
CSS3選擇器結合JavaScript的Hack
我們用IE10進行舉例:
由于IE10用戶代理字符串(UserAgent)為:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0),所以我們可以使用JavaScript將此屬性添加到文檔標簽中,再運用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; }