1、何為HACK?
簡單的說,HACK就是隻有特定瀏覽器才能識別這段hack代碼。Hack也可以說是讓前端最為頭疼的問題,因為要寫N多種兼容代碼。當然,IE是最讓人蛋疼的。
一般來說,CSS HACK
有3種表現形式:
CSS屬性前綴法
::比如 IE6能識別下劃線"_"和星號" * ",IE7能識別星號" * ",但不能識別下劃線"_",IE6~IE10都認識"\9",但firefox對前面三個都不能認識。
CSS選擇器前綴法
:比如 IE6能識別*html .class{},IE7能識別*+html .class{}或者*:first-child+html .class{}。IE條件註釋法
:針對所有IE,<!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->
。比如:針對IE6及以下版本: <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效,對寫在判斷語句裡面的所有代碼都會生效(注:IE10+已經不再支持條件註釋)。
下面將對這三種形式一一分析!
2、CSS 屬性前綴法
這裡提供一個測試實例(所有下面的代碼都可以在這個實例裡找到):測試實例
(1)IE6(_)
.test1 { _color: red; }
(2)IE7及其以下版本(*)
如下設置,IE7及其以下版本中都會生效:
.test2 { *color: yellow; }
如果是在選擇器上設置,則只會在IE6中生效:
*html .test { color: gold; }
(3)IE6/IE7/IE8(\9)
網上的資料說只有IE6/IE7/IE8中生效,可是經測試,在IE9/IE10中也同樣生效(如果知道原因的,請告知):
.test3 { color: purple\9; }
(4)IE8/IE9/IE10/IE11(\0)
在IE8/IE9/IE10/IE11中生效: .test4 { color: green\0; }
(5)IE6(-)
在IE6中生效:.test5 { -color: pink; }
(6)IE6/IE7(+)
在IE6/IE7中生效:.test6 { +color: gold; }
(7)IE6/IE7(*+)
如果在類的屬性上加,會在IE6/IE7都生效:.test7 { *+color: blue; }
如果在選擇器上加,只會在IE7生效:*+html .test { color: black; }
(8)!important
除了IE6,其他瀏覽器中都生效:.test8 { color: #fff !important; }
(9)IE9/IE10(\9\0)
.test9 { color: orange\9\0; }
一般寫HACK的順序:從最新版本到低版本,比如:新版本、IE(10/9/8)、IE(7/6)
color: black; /* 所有 */
color: white !important; /* 除了IE6外 */
color: orange\9\0; /* IE 9/10 */
color: green\0; /* IE 8/9/10 */
*color: yellow; /* IE6/7 */
+color: gold; /* IE6/7 */
*+color: blue; /* IE6/7 */
_color: red; /* IE6 */
3、CSS選擇器前綴法
(1)*
只在IE6中生效:
*html .test21 { color: gold; }
(2)*+
只在IE7中生效:
*+html .test22 { color: blue; }
(3)IE6/IE7
在IE6/IE7中生效:
@media screen\9 {
.test23 { color: purple; }
}
(4)IE6/IE7/IE8
在IE6/IE7/IE8中生效:
@media \0screen\,screen\9 {
.test24 { color: gold; }
}
(5)IE8
在IE8中生效:
@media \0screen {
.test25 { color: orange; }
}
(6)IE8/IE9/IE10/IE11
在IE8/IE9/IE10/IE11中生效:
@media screen\0 {
.test26 { color: green; }
}
(7)IE9/IE10/IE11
在IE9/IE10/IE11中生效:
@media screen and (min-width: 0\0) {
.test27 { color: red; }
}
4、條件註釋
下面的N表示版本。
(1)IE
<!--[if IE]> 所有IE中生效 <![endif]-->
(2)IE N
比如:只在IE 7中生效:
<!--[if IE 7]> 只在IE7生效 <![endif]-->
注意:版本之間要留空格,比如:IE7是無效的,應該是IE 7。
(3)gt
gt符號表示大於運算符。比如:在IE7以上(不包含IE7)生效
<!--[if gt IE 6]> 在IE6以上生效 <![endif]-->
(4)!
!符號表示非運算符。比如:在IE 6上不生效
<!--[if ! IE 6]> 在IE6上不生效(非IE6生效) <![endif]-->
也可以這樣(所有IE都不生效):
<!--[if ! IE]> 所有IE中都不生效(非IE生效) <![endif]-->
(5)lt
lt符號表示小於運算符。比如:IE6以下(不包含IE6)版本
<!--[if lt IE 6]> IE6以下可生效 <![endif]-->
(6)lte
lte符號表示小於或等於運算符:
<!--[if lte IE 6]> IE6及IE6以下可生效 <![endif]-->
(7) gte
gte符號表示大於或等於運算符:
<!--[if gte IE 6]> IE6及IE6以上可生效 <![endif]-->
(8)&
&符號表示AND運算符:
<!--[if (gt IE 6)&(lt IE 8)]> IE6版本以上且IE8版本以下可生效 <![endif]-->
(9) |
|符號表示OR運算符:
<!--[if (IE 6)|(IE 7)]> IE6或IE7可生效 <![endif]-->
注:IE10+已經不再支持條件註釋。
5、針對其他瀏覽器的HACK
(1)針對火狐
只在火狐中有效:
@-moz-document url-prefix() {
.test { color: red; }
}
(2)支持所有Gecko內核的瀏覽器(包括火狐)
*>.test { color: blue; }
(3)針對Webkit內核瀏覽器
@media all and (min-width:0px) { color: purple; }
6、CSS選擇器的優先級
相同權值情況下,CSS樣式的優先級是:就近原則(也就是相同權值的,後設置的優先):
.a { color: red; }
.b { color: blue; }
<div class="b a">我會是藍色的,而不是紅色</div>
優先級規則:
內聯樣式 > 嵌入樣式 > 外部樣式
ID(100) > 類選擇符(10) > 標籤(1) > 通配選擇器(*)
在支持!important的情況下,其優先級最高。
文章摘自博客園
更多IT精品課程,訪問中公優就業官網:http://xue.ujiuye.com
勤工儉學計劃”,給你一個真正0元學習IT技術的機會!
http://www.ujiuye.com/zt/qgjx/?wt.bd=lsh
找工作太難?不是你不行,我們來幫你!
http://www.ujiuye.com/zt/jyfc/?wt.bd=lsh