CSS Hack

CSS Hack：不一樣廠家的瀏覽器或者相同廠家不一樣版本的瀏覽器對於css的解析是不徹底相同的，這樣就致使了瀏覽器的頁面生成的效果會不同。CSS Hack的做用就是使得css在不一樣的瀏覽器中兼容，讓不一樣的瀏覽器生成咱們想要的效果的頁面。（CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。）

　　經常使用的CSS Hack方式：

　     （1）註釋法 （條件Hack） （2）類內屬性前綴法  （屬性級Hack）（3）選擇器前綴法（選擇符級Hack）

　　（1）註釋法 （條件Hack）：

　　　　語法：<!--[if IE]>這段文字只在IE瀏覽器顯示<![endif]-->

　　　　  注意：if條件Hack是HTML級別的（包含但不只是CSS的Hack，能夠選擇任何HTML代碼塊）

　　　　  不一樣瀏覽器的不一樣條件表：

只在IE下生效	只在IE6下生效	只在IE6以上版本生效	只在IE8上不生效	非IE瀏覽器生效
<!--[if IE]> 這段文字只在IE瀏覽器顯示 <![endif]-->	<!--[if IE 6]> 這段文字只在IE6瀏覽器顯示 <![endif]-->	<!--[if gte IE 6]> 這段文字只在IE6以上(包括)版本IE瀏覽器顯示 <![endif]-->	<!--[if ! IE 8]> 這段文字在非IE8瀏覽器顯示 <![endif]-->	<!--[if !IE]> 這段文字只在非IE瀏覽器顯示 <![endif]-->

　　（2）類內屬性前綴法  （屬性級Hack）

　　　　語法：selector{<hack>？property：value<hack>?;}

　　　　 注意：儘量減小對CSS Hack的使用。Hack有風險，使用需謹慎

　　　　         一般如未做特別說明，本文檔全部的代碼和示例的默認運行環境都爲標準模式。

　　　　　　   一些CSS Hack因爲瀏覽器存在交叉認識，因此須要經過層層覆蓋的方式來實現對不一樣瀏覽器進行Hack的。

　　　　  IE瀏覽器各個版本CSS Hack對照表：

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

_(IE6專有的hack)

_color

藍色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y

\0（「\9″ IE6/IE7/IE8/IE9/IE10都生效） 　（「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack）

color:red\0

紅色

N

N

N

N

Y

N

Y

N

Y

N

\9\0（只對IE9/IE10生效，是IE9/10的hack）

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

　　（3）選擇器前綴法（選擇符級Hack）

　　　　語法：<hack>selector{sRules}

　　　　 注意：與（2）的注意相同。

　　　　  經常使用的幾個例子：

* html .test { color: #090; } /* For IE6 and earlier */ * + html .test { color: #ff0; } /* For IE7 */ .test:lang(zh-cmn-Hans) { color: #f00; } /* For IE8+ and not IE */ .test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */