CSS hack是指我們為了兼容各瀏覽器，而使用的特別的css定義技巧。這是國外摘來的一張CSS hack列表，顯示了各瀏覽器對css hack的支持程度，對我們制作兼容網頁非常有幫助。

?

?

屏蔽IE瀏覽器（也就是IE下不顯示）

*:lang(zh) select {font:12px? !important;} /*FF,OP可見，特別提醒：由于Opera最近的升級，目前此句只為FF所識別*/
select:empty {font:12px? !important;} /*safari可見*/
這里select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。

僅IE7與IE5.0可以識別

*+html? select {…}
當面臨需要只針對IE7與IE5.0做樣式的時候就可以采用這個HACK。

僅IE7可以識別

*+html? select {…!important;}
當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。

IE6及IE6以下識別

* html? select {…}
這個地方要特別注意很多博客都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body? select {…}
這句與上一句的作用相同。

僅IE6不識別，屏蔽IE6

select { display /*屏蔽IE6*/:none;}
這里主要是通過CSS注釋分開一個屬性與值，注釋在冒號前。

僅IE6與IE5不識別，屏蔽IE6與IE5

select/**/ { display /*IE6,IE5不識別*/:none;}
這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋。不屏蔽IE5.5

僅IE5不識別，屏蔽IE5

select/*IE5不識別*/ {…}
這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別，IE5.5可以識別。

盒模型解決方法

selct {width:IE5.x寬度; voice-family :"/"}/""; voice-family:inherit; width:正確寬度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。

清除浮動

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。

截字省略號

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度后會自行的截掉多出部分的文字，并以省略號結尾，很好的一個技術。只是目前Firefox并不支持。

只有Opera識別

@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。

以上都是寫CSS中的一些HACK，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。

IE5.x的過濾器，只有IE5.x可見

@media tty {
i{content:"/";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */

IE5/MAC的過濾器，一般用不著

/*/*//*/
??? @import "ie5mac.css";
/**/

IE的if條件Hack

<!--[if IE]> Only IE <![endif]-->
所有的IE可識別
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以識別
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包換IE5.5都可以識別
<!--[if lt IE 6]> Only IE 6- <![endif]-->
僅IE6可識別
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可識別
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
僅IE7可識別

以上內容可能并不全面，歡迎大家能和我一起把這些技巧都匯總起來，為以后工作的查詢提供一個方便，同時在這里感謝那些研究出這些HACK的作者們。

?

　　先來說一下什么是css hack ，寫了這么久的div+css代碼，我還真不知道這個hack是什么？上網仔細查了一下。簡單的說針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack,也叫寫CSS hack。

Css hack的原理：由于不同的瀏覽器對CSS的支持及解析結果不一樣，還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。 　　比如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等 書寫順序，一般是將識別能力強的瀏覽器的CSS寫在后面 瀏覽器優先級別:FF < IE7 < IE6 , CSS hack書寫順序一般為FF IE7 IE6 來看下面div+css瀏覽器兼容的例子：　　 #demo {width:100px;} ????/*被FIREFOX,IE6,IE7執行.*/ * html #demo {width:120px;} /*會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */ *+html #demo {width:130px;} /*會被IE7執行*/ 所以最后,#demo的寬度在三個瀏覽器的解釋為: 　　firefox:100px; 　　ie6:120px; ie7:130px; 以上例子也可以用我的上一篇文章“div+css瀏覽器兼容實例一中的方法來解決！在這里就不再舉例了。” Div+css瀏覽器的兼容技巧： ① 垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.) ② 水平居中. margin: 0 auto;(當然不是萬能)
③ 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
④ FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
⑤ ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表) ⑥ 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應. ⑦ 關于手形光標. cursor: pointer. 而hand 只適用于 IE. ⑧ FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)

?注：針對firefox ?IE6 ?IE7的css樣式
現在大部分都是用!important來hack，對于IE6和firefox測試可以正常顯示，
但是IE7 !important可以正確解釋，會導致頁面沒按要求顯示！找到一個針
對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。
現在寫一個瀏覽器兼容的CSS樣式：
#cshk{ height:20px; } /* Moz */
* html #cshk {height:50px; } /* IE6 */
*+html #cshk {height:80px; } /* IE7 */
那么在firefox下高度為20，IE6下的高度為50，IE7下的高度為80。 給大家一點意見:能不用CSS Hack還是不用的好。其實在設計網站的時候，如果能考慮到一些可能出現CSS bug的地方，是最好的，我設計網站的時候都盡量避免CSS bug.一般高手都不用hack. 如果您還有什么不理解或不滿意答案的話請留言．

總結

以上是生活随笔為你收集整理的CSS hack浏览器兼容一览表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。