css的hack技術使用匯總

什麼是CSS hack？

在web開發中，我們經常會遇到各瀏覽器表現不一致的情況，由於不同廠商的流覽器或某瀏覽器的不同版本，對CSS的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

下面就來談一談CSS hack 技術的使用：

CSS hack 技術

1. 詳解css hack的分類和css hack三種方式

css hack 分類
有三種表現形式，css屬性首碼法，選取器首碼法，以及IE條件注釋法。

屬性首碼法（即類內部hack）

選取器首碼法

IE條件注釋法
css hack一般是將適用範圍廣，被識別能力強的css定義在前面。

2. 用CSS hack技術解決瀏覽器安全色性問題

　CSS Hack大致有3種表現形式：CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE瀏覽器。

　　a、屬性級Hack：比如IE6能識別底線"_"和星號" * "，IE7能識別星號" * "，但不能識別底線"_"，而firefox兩個都不能認識。等等

　　b、選擇符級Hack：比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。等等

　　c、IE條件注釋Hack：比如針對所有IE：<!--[if IE]><!--您的代碼--><![endif]-->，針對IE6及以下版本：<!--[if lt IE 7]><!--您的代碼--><![endif]-->，這類Hack不僅對CSS生效， 對寫在判斷語句裡面的所有代碼都會生效。

3. 不同瀏覽器的CSS hack寫法介紹

區別IE6與FF：
backgroundrange;*blue; < /span>
區別IE6與IE7：
background:green !important;blue; < /span>
區別IE7與FF：
backgroundrange; *background:green;
區別FF，IE7，IE6：
backgroundrange;*background:green !important;*blue; < /span>

4. 最全的CSS hack方式一覽(相容多瀏覽器)

一般情況下，我們盡量避免使用CSS hack，但是有些情況為了顧及使用者體驗實現向下相容，不得已才使用hack。比如由於IE8及以下版本不支援CSS3,而我們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件注釋等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護的負擔。

5. CSS hack

由於不同的瀏覽器，甚至同一瀏覽器的不同版本對CSS的解析認識不一樣，導致產生的頁面效果不一致，寫出針對不同瀏覽器CSS code就稱為CSS hack。

常用的CSS hack 有三種方式，CSS 內部hack、選取器hack、HTML 頭部引用，其中第一種最常用。

6. CSS Hack收集匯總

屏蔽IE瀏覽器（也就是IE下不顯示）
*:lang(zh) select {font:12px !important;} /*FF的專用*/
select:empty {font:12px !important;} /*safari可見*/
這裡select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器專屬的。
僅IE7識別

相關問答

1. css hack的問題

2. 一個關於IE版本HACK的問題

3. input text文字選中改變預設顏色，safari不支援，有什麼其他hack方案麼

【相關推薦】

1. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》