這里說的Hack一般是針對于IE瀏覽器,使用Hack的最終目的也是為解決瀏覽器的兼容性問題。
Hack一般分為三種:條件Hack,屬性級Hack,選擇符級Hack。
1. 條件Hack
如果不想在IE中看到某個區域,可以這樣寫:
<!--[if IE]>
<p>我只在IE9以下出現</p>
<![endif]-->
IE10以上不識別IE條件注釋,如果我們想識別IE10,可以通過user-agent代理字符串。
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; Win64; x64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; SLCC2)"
var m= /(MSIE\s)(\d+)/i.test(navigator.userAgent);
var version = (m && m[2]) ? +m[2] : -1;
大于或小于某個IE版本寫法
<!-- [if gt IE 6]>
//大于IE6
<![endif] -->
<!-- [if gte IE 6]>
//大于或等于IE6
<![endif] -->
<!-- [if lt IE 6]>
//小于IE6
<![endif] -->
<!-- [if lte IE 6]>
//小于或等于IE6
<![endif] -->
2. 屬性Hack
語法如下:
.test {
color: #fff; //FF
[;color:#ddd;]; //Chrome,Safari
color: #fef\0; //Opera
color: #fef\9; //IE8+(IE11不識別)
*color: #f00; //IE7
_color: #ff0; //IE6
}
下面列舉一些工作之中常用的Hack值
- _:IE6及以下會識別。
- *:IE7及以下會識別。
- \9:IE6-IE10會識別(IE11不認識)。
- \0:IE8及以上和opera會識別(IE11也識別)。
- [;property:value;];:Webkit瀏覽器會識別,IE7以下也會識別。
3. 選擇符級Hack
*html #demo { color: red;} //IE6
*+html #demo { color: red;} //IE7
以后還會收錄更多的hack,后續會更新。