css hack

CSS hack由於不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，

對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，

能在不同的瀏覽器中也能得到我們想要的頁面效果。

CSS Hack的原理是什麼

　　由於不同的瀏覽器對CSS的支持及解析結果不一樣，還由於CSS中的優先級的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。　　CSS Hack大致有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，CSS Hack主要針對IE瀏覽器。　　類內部Hack：比如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等　　選擇器Hack：比如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。等等　　HTML頭部引用(if IE)Hack：針對所有IE：<!--[if IE]><!--您的代碼--><![endif]-->，針對IE6及以下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->，這類Hack不僅對CSS生效，對寫在判斷語句裏面的所有代碼都會生效。　　書寫順序，一般是將識別能力強的瀏覽器的CSS寫在後面。下面如何寫裏面說得更詳細些。

如何寫CSS Hack

　　

童鞋，如果你願意，可以關注另外兩篇關於 CSS Hacks 的文章哦！《CSS Hacks for IE，IE 也可以很完美》和《CSS 忍者：安全的 CSS hacks 祕籍》。

所謂 CSS Hack，是指在 CSS 代碼中嵌入諸如 *，*html  等代碼，方便於獨立控制某種瀏覽器的具體樣式。比如有些 CSS Hack 只能被 IE6 或 IE7 識別，而 Firefox 等瀏覽器則不能識別。這樣一來可以有效控制 CSS 在不同瀏覽器的表現，避免撰寫多個 CSS 文件。

芒果在這裏大致整理了常用 CSS Hack 的寫法，幫助你更好地控制頁面呈現：

1. * 符號

IE 瀏覽器能識別 * 符號，但其他瀏覽器諸如 Firefox、Opera、Chrome 等不能識別 * 符號。

例：在 Firefox 和 IE 中呈現不同的文字顏色：

color:red;*color:blue;
//在 Firefox 等非 IE 核心瀏覽器中，文字呈現紅色；而 IE 中呈現藍色。

2. !important

IE7 不但能識別 * 符號，還能識別 !important，而 IE6 只能識別前者。

例：在 IE6 和 IE7 中呈現不同的文字顏色：

color:red !important;color:blue;
//在 IE7 瀏覽器中，文字呈現紅色；而 IE6 中呈現藍色。

綜合 1 和 2，利用上述瀏覽器特性，可在 CSS 中判別 Firefox，IE7，IE6 並加載不同樣式。

例：在 Firefox，IE7，IE6 中呈現三種不同文字顏色：

color:blue;*color:red !important;*color:green;
//在 Firefox 中，文字呈現藍色，在 IE7 瀏覽器中，呈現紅色；而 IE6 中呈現藍色。

4. *html 和 *+html

IE 核心的瀏覽器能識別*html 和*+html，而 Firefox 等非 IE 核心瀏覽器不能識別。

例：在 Firefox，IE7，IE6 中呈現三種不同文字顏色：

#div {color:red;}
*html #div {color:green;}
*+html #div{color:blue;}
//第一句 Firefox 等可以正常識別，所以這些瀏覽器中文字呈紅色；
//第二句 IE6 能識別並執行，用於針對 IE6 獨立寫的樣式，文字綠色；
//第三句只有 IE7 才能正確識別，而 IE6 和其他非 IE 核心瀏覽器不能，文字呈藍色。