CSS Hack整理

CSS Hack是在標準CSS沒辦法相容各瀏覽器顯示效果時才會用上的補救方法,在各瀏覽器廠商解析CSS沒有達成一致前,我們只能用這樣的方法來完成這樣的任務.

我進行前端開發的時候,測試用的瀏覽器大致有: IE7, IE6, Opera9(文章撰寫時版本為9.25 8825), Safari3(文章撰寫時版本為3.0.4 523.15), Firefox2(文章撰寫時版本為2.0.0.11).

在正常的 selector { property:value; } 的基礎上常會根據具體情況為相同元素使用Hack以達到瀏覽器間統一.

IE系列:

selector { +property:value; } 在屬性名稱前加上加號"+",這個Hack只有IE系列可以識別. 
selector { *property:value; } 在屬性名稱前加上星號"*",這個Hack只有IE系列可以識別. 
selector { _property:value; } 在屬性名稱前加上底線"_",這個Hack只有IE系列 (除IE7外) 識別. 
* html selector{ property:value; } 在選取器上運用繼承法 * html selector, 這個Hack只有IE系列 (除IE7外) 可以識別. 
html/**/ >body  selector { property:value; } 在選取器上運用繼承法 html/**/ >body  selector ,這個Hack只有IE系列 (除IE7外) 可以識別. 
selector { property/**/:value; } 在屬性名稱和冒號":"之間加入注釋,屏蔽IE6用. 
selector/**/ { property/**/:value; } 在選取器和花括弧"{"之間以及在屬性名稱和冒號":"之間加入注釋,屏蔽IE5和IE6用 (不屏蔽IE5.5) . 
select/**/ { property:value; } 在選取器和花括弧"{"之間加入注釋,屏蔽IE5用. 
*+html  selector { property:value !important; } 在選取器上運用繼承法 *+html selector 再加上 !important, 這個Hack只有IE7可以識別.

Firefox:

*:lang(lang) selector { property:value !important; } 用偽類lang(語言)再加上!important進行定義的話,目前只有Firefox可以識別.

Safari:

selector:empty { property:value !important; } 用偽類empty再加上!important進行定義的話,目前只有Safari可以識別.

Opera:

@media all and (min-width: 0px){ selector { property:value; } } 利用特殊繼承法進行定義的話,目前只有Opera可以識別.

以上的Hack並不完整,大家一起補充.

對Hack的運用,最普遍的是CSS盒模型Hack,清除浮動Hack.

CSS盒模型在IE5.X上是有嚴重解析錯誤的.這個Hack針對IE5.X:

selctor { width:IE5.X寬度; voice-family :"\"}\""; voice-family:inherit; width:正確寬度; }

清除浮動Hack,相信這個定義用的人很多:

selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

另外還有很多很多CSS Hack的運用,一一列舉的話可能能寫成一本書了...想到再添加吧.

下面的相容一覽圖來源：http://centricle.com/ref/css/filters/

點擊放大

經典論壇討論：
http://bbs.blueidea.com/thread-2824980-1-1.html

本文連結：http://www.blueidea.com/tech/web/2008/5287.asp