CSS Hack匯總

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的 目的。