因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對CSS的支持、解析不同,致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時,咱們爲了得到統一的頁面效果,就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式,咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程,叫作CSS hack!css
因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同,以及CSS優先級對瀏覽器展示效果的影響,咱們能夠據此針對不一樣的瀏覽器情景來應用不一樣的CSS。html
CSS Hack大體有3種表現形式,CSS屬性前綴法、選擇器前綴法以及IE條件註釋法(即HTML頭部引用if IE)Hack,實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。css3
CSS hack書寫順序,通常是將適用範圍廣、被識別能力強的CSS定義在前面。瀏覽器
這種方式是IE瀏覽器專有的Hack方式,微軟官方推薦使用的hack方式。舉例以下編碼
1 只在IE下生效 2 <!--[if IE]> 3 這段文字只在IE瀏覽器顯示 4 <![endif]--> 5 6 只在IE6下生效 7 <!--[if IE 6]> 8 這段文字只在IE6瀏覽器顯示 9 <![endif]--> 10 11 只在IE6以上版本生效 12 <!--[if gte IE 6]> 13 這段文字只在IE6以上(包括)版本IE瀏覽器顯示 14 <![endif]--> 15 16 只在IE8上不生效 17 <!--[if ! IE 8]> 18 這段文字在非IE8瀏覽器顯示 19 <![endif]--> 20 21 非IE瀏覽器生效 22 <!--[if !IE]> 23 這段文字只在非IE瀏覽器顯示 24 <![endif]-->
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴,以達到預期的頁面展示效果。spa
IE瀏覽器各版本 CSS hack 對照表.net
hack | 寫法 | 實例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
* | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
+ | +color | 綠色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
- | -color | 黃色 | Y | Y | N | N | N | N | N | N | N | N |
_ | _color | 藍色 | Y | Y | N | Y | N | Y | N | Y | N | N |
# | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
\0 | color:red\0 | 紅色 | N | N | N | N | Y | N | Y | N | Y | N |
\9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
!important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
說明:在標準模式中firefox
選擇器前綴法是針對一些頁面表現不一致或者須要特殊對待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。code
目前最多見的是htm
*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有效 等等
通常狀況下,咱們儘可能避免使用CSS hack,可是有些狀況爲了顧及用戶體驗實現向下兼容,不得已才使用hack。好比因爲IE8及如下版本不支持CSS3,而咱們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染,這種狀況下若是不使用css3pie或htc或條件註釋等方法時,可能就得讓IE8-的專屬hack出馬了。
使用hack雖然對頁面表現的一致性有好處,但過多的濫用會形成html文檔混亂不堪,增長管理和維護的負擔。相信只要你們一塊兒努力,少用、慎用hack,將來必定會促使瀏覽器廠商的標準愈來愈趨於統一,順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack,必將減輕咱們編碼的複雜度,少作無用功。
最後補上一張引自國外某大牛總結的CSS hack表,這時一張6年前的舊知識彙總表了,放在這裏僅供須要時候方便參考。