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

現在瀏覽器的市場99%的份額被 IE 和 FF 所占 .所以,現在的hack應該主要針對這兩個瀏覽器的了

現在主流的瀏覽器是 IE6 和 Firefox ,這兩個不同的瀏覽器的內核是不一樣的. 同時,這兩個瀏覽器對CSS2.0 在某些細節上的理解也不一樣.因此,就有必要針對這兩個瀏覽器制定一些不同的代碼.

?????? 于是,就有了 CSS hack 技術了 當然,njuptsoz 認為 ,隨著時間的推薦,WEB標準的推進,這種 hack技術最終是會消亡的,這一點從IE7就可以看出來.但是,目前的市場還是 IE6 和 FF 的天下,所以, 現在來討論 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的作者們。

、說明本文闡述了8條我們發現的在用CSS設計中有用的解決方案。

2、瀏覽器特定的選擇器

當你想在一個瀏覽器里改變樣式而不像在其他瀏覽器中改變時，這些選擇器很有用。

IE6以下

?? *html{}

IE 7 以下

*:first-child+html {} * html {}

只對IE 7

*:first-child+html {}

只對IE 7 和現代瀏覽器

html>body {}

只對現代瀏覽器(非IE 7)

html>/**/body {}

最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=”"] body:last-child {}

要使用這些選擇器，請在樣式前寫下這些代碼。例如：

#content-box {
width: 300px;
height: 150px;
}
* html #content-box {
width: 250px;
}
/* 重寫上面的代碼并且把寬度改為250PX
在IE6以下版本中適用。 */

3、在IE6中使用透明PNG圖片

IE6的一個很難處理的BUG就是它不支持透明PNG圖片。

你可能需要用一個重寫的CSS的濾鏡來解決這個問題：

*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}

8、最小寬度

IE的另外一個Bug就是它不支持min-width屬性。min-width確實非常有用，特別是對于100%寬度的可變模板來說，因為他告訴瀏覽器停止收縮。

對于除IE6以外的所有瀏覽器來說你只需min-width:xpx;例如：

.container {
min-width:300px;
}

要讓這些在IE6下起作用的話你要添加額外的努力！你需要創建兩個DIV，一個包含著另一個。

<div class=”container”>
<div class=”holder”>Content</div>
</div>

然后你需要設置外面層的min-width：

.container {
min-width:300px;
}

現在又要IE hack起作用了，你需要寫下以下代碼：

* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

當瀏覽器窗口調整外層寬度來適應直到它縮小到border的寬度時，這個時候它就不能夠在縮小了。而holder層也會停止收縮。外層的邊框寬度變成了內層的最小寬度。

9、隱藏水平滾動

要去除水平滾動條，可以在body中插入overflow-x:hidden屬性。

body {
overflow-x: hidden;
}

這在你決意要用一個比瀏覽器款的圖片或Flash時很有用。

4、去掉連接虛線框

當你點擊鏈接時，Firefox會在鏈接周圍產生一個虛線外框。

這個很好解決，只需在a標簽中添加outline:none就可以了。

a{
?? outline:none;
}

5、對inline元素應用寬度。

如果你對一個inline元素使用寬度，它將只在IE6下起作用。

所 以的HTML標簽要么是Block的要么就是inline的。inline屬性的標簽 有<span><a><strong>和<em>Block標簽包 括<div><p><h1><form>和<li>

你不能控制inilne標簽的寬帶，不過有一個方法是把標簽屬性從inline改為Block。

span{
?? width:150px;
?? display:block;
}

應用display:block能夠把span標簽變成block標簽，從而控制它的寬度。

6、使一個固定寬度的網站居中。

為了讓你的網站在瀏覽器中居中，可以為最外層Div添加position:relative屬性，然后將margin設為auto。

#wrapper {
margin: auto;
position: relative;
}

7、圖片替換技術

對于頭部來說，永遠是最好用文字而不是圖片。在你必須要用圖片的某個特殊地方最好使用隱藏文字的層的背景圖片。這對于屏幕閱讀和SEO非常有用，盡管依然使用很普通的文字，這可以聯想到所有的優點。

HTML：

<h1><span>Main heading one</span></h1>

CSS:

h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}

正如你所見，我們對H1標簽使用普通的HTML代碼，用CSS來將圖片替代文字。Text-indent把文字放到左邊5000像素處，從而用戶看不到它們。

什么是CSS hack
由于不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。

這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack,也叫寫CSS hack。

CSS Hack的原理是什么
由于不同的瀏覽器對CSS的支持及解析結果不一樣，還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。

比如 IE6能識別下劃線_和星號*，IE7能識別星號*，當不能識別下劃線_，而firefox兩個都不能認識。等等

書寫順序，一般是將識別能力強的瀏覽器的CSS寫在后面。下面如何寫里面說得更詳細些。

如何寫CSS Hack
比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：

<style>??
div{???
??? background:green; /* for firefox */???
??? *background:red; /* for IE6 */???
}???
</style>??
<div>我在IE6中看到是紅色的，在firefox中看到是綠色的。</div>
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是紅色的，在firefox中看到是綠色的。</div>

解釋一下：
上面的css在firefox中，它是認識不了后面的那個帶星號*的東東是什么的，于是將它過濾掉，不予理睬，解析得到的結果是:div{background:green},于是理所當然這個div的背景是綠色的。
在IE6中呢，它兩個background都能識別出來，它解析得到的結果是:div{background:green;background:red;},于是根據優先級別，處在后面的red的優先級高，于是當然這個div的背景顏色就是紅色的了

區別IE6與FF：
?????? background:orange;*background:blue;

區別IE6與IE7：
?????? background:green !important;background:blue;

區別IE7與FF：
?????? background:orange; *background:green;

區別FF，IE7，IE6：
?????? background:orange;*background:green !important;*background:blue;

注：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;

IE6 IE7 FF
* √ √ ×
!important × √ √

hack 一詞在網絡上相當常用，一般是指對程序或系統進行非官方的修改，或是非官方的補丁，被稱之為hack，當然hacker就是指黑客了，css hack也可以理解為css黑客程序，是指一種改善css在不同瀏覽器下表現形式的技巧方法。csshack技術是通過一些瀏覽器特殊支持或不支持的語 句，使一個css樣式能夠被瀏覽器解析或不能被瀏覽器解析。

css hack用于對不同瀏覽器區別處理，這樣就做到了針對一些瀏覽器之間的顯示問題進行單獨的樣式設計進行修復，關于如何使用css hack，舉一個非常簡單的例子，例如css中的導入樣式表語句—@import，@import語句是IE5之后才被IE所認同的一個命令，因此如果使用@import導入樣式表，這些樣式表只有IE5才能看到，IE4是沒有辦法解析，因此我們利用此方法編寫樣式代碼：
@import url("newstyle.css");
body {
font-size:14px;
}

我們在newstyle.css中做如下編碼：
body {
font-size:18px;
}

最 終在瀏覽網頁時，如果使用IE4瀏覽器，將使用字體大小為14px，而如果使用IE5及以上版本瀏覽器時，將顯示為18px的字體。這就是csshack 的基本應用形式，通過一些瀏覽器之間特殊命令來實現樣式的隱藏與顯示，在這里針對IE4及IE4以上版本瀏覽器做了字體樣式的區分，從而達到了hack的 目的。

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的CSS Hack汇总(转载)的全部內容，希望文章能夠幫你解決所遇到的問題。

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