針對不同的瀏覽器寫不同的CSS code

首先建站學帶你瞭解下什麼是CSS hack：

CSS hack由於不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣， 得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。 這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack!

我們先看下不同瀏覽器之間的區別：

IE6比較老的版本瀏覽器，使用者比較多，
IE7較新瀏覽器，更接近標準瀏覽器，
IE8算是微軟標準瀏覽器，但差別于瀏覽器，
火狐（Mozilla, Firefox）和谷歌瀏覽器（chrome）是比較標準的IE瀏覽器，一般我們以這個瀏覽器為開發參考平臺，同時IE8與這兩個瀏覽器解釋CSS比較接近，一般只要通過火狐、谷歌瀏覽器測試相容， 一般就能確定IE8.

因此一般我們區別這些瀏覽器CSS hack的方法就變得簡單，我們只需考慮IE6IE7火狐（Firefox）這3個瀏覽器即可相容全部瀏覽器。
具體區別如下：
區別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;以下是各瀏覽器CSS hack表格

另外再補充一個，底線"_",
IE6支援底線，IE7和firefox均不支援底線。

於是大家還可以這樣來區分IE6，IE7，firefox: background:orange;*background:green;_background:blue;

注：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

以上是介紹區別各瀏覽器的CSS hack的寫法，下面我們簡單介紹這些CSS hack用法：

要求說明：假如我們設置一個類名為exple的類CSS屬性,CSS樣式邊框為1PX黑色邊框，高度為100PX並要求，在IE6瀏覽器下寬度為100PX；IE7瀏覽器寬度下為150PX；火狐IE8谷歌瀏覽器下寬度為200PX； (PX是長度單位圖元)

則CSS代碼如下：
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}
這樣只要在html設置一個div的類(class="exple"),這樣這部分在火狐、IE8、谷歌瀏覽器下就會顯示寬度為200px高度為100px帶1px的黑邊框的方塊 ；IE7瀏覽器寬度下為150PX高度為100px帶1px的黑邊框的方塊；在IE6瀏覽器下就會顯示出長度和寬度為100px的帶1px黑邊的正方形。

瀏覽器優先順序別:FF<IE7<IE6,CSS hack書寫順序一般為FF IE7 IE6

以: " #demo {width:100px;} " 為例;

#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;

IE8 最新css hack：

"9"　例:"border:1px 9;". 這裡的"9"可以區別所有IE和FireFox.

"*"　IE6、IE7可以識別.IE8、FireFox不能.

"_"　IE6可以識別"_",IE7、IE8、FireFox不能.