目前，對於網頁中一些瀏覽器相容性問題，可以使用css hack（css 招數）和瀏覽器Ｂug修復的方式解決。

名詞解釋：

　　css Hack：針對特定瀏覽器編寫冗餘程式碼，這是一種欺騙瀏覽器的行為，預示著有更好的解決辦法。

　　瀏覽器bug修復：針對瀏覽器本身的bug，使用css自有的屬性，進行瀏覽器顯示問題的修復。

常見瀏覽器相容性解決方案：

1、ＩＥ有條件註釋

　　程式碼示例：

　　　　<!-- [ if IE8 ] >

　　　　　　<style>

　　　　　　　　@import " test.css";

　　　　　　</style>

　　　　<! [endif] -->

　　　　在語法中：

　　　　<!-- [if IE8] >...<![endif]-->:用於宣告瀏覽器版本，在該版本瀏覽器中使用其中的樣式表。

　　　　@import"test.css":使用匯入式匯入樣式表

2、子選擇器招數

程式碼示例：

　　html>body {

　　　　background-image:url(bg.png);

　　}

　　在語法中:

　　html>body：針對ie6及其以下版本，隱藏透明圖片bg.png

3、*html招數

*html {

　　　　font-size:14px;

　　}

　　在語法中：

　　*html:針對ie6及其以下版本，設定字號為14畫素。

4、!important招數

程式碼示例：

#nav {

　　　　font-size:18px !important;　　//ie7以上版本

　　　　font-size:14px;　　　　　　　//ie6以下版本

　　}

　　在語法中：使用!important來提高權重，優先載入。

5、針對IE6~IE8的招數

_：選擇IE6及以下。連線線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（_）更為合適。

　　*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高
　　\9：選擇IE6+
　　\0：選擇IE8+和Opera
　　[;property:value;];

　　：選擇webkit核心瀏覽器（Chrome,Safari）。IE7及以下也能識別。中括號內外的3個分號必須保留，

　　第一個分號前可以是任意規則或任意多個規則[;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價的。

　　生效的始終是中括號內的最後一條規則，所以通常選用第一種寫法最為簡潔。

 　　程式碼示例：

　　　　.test{
　　　　　　 color:#c30;          /* For Firefox */
 　　　　　　[;color:#ddd;];      /* For webkit(Chrome and Safari) */
 　　　　　　color:#090\0;        /* For Opera */
 　　　　　　color:#00f\9;        /* For IE8+ */
 　　　　　　*color:#f00;         /* For IE7*/
 　　　　　　_color:#ff0;         /* For IE6*/
　　　　}

注意：同時設定多個瀏覽器的css hack時，必須注意瀏覽器版本宣告順序：高——>低，即ie8 --> ie7 -->ie6.

6、IE6雙倍空白邊距　Bug修復

程式碼示例：

#nav {

　　　　float:left;

　　　　margin:10px;

　　　　display:inline;

　　}

　　產生條件：對某一元素，同時設定float屬性和margin屬性。

　　顯示效果：在ie6中，左、右外邊距加倍，上、下外邊距無影響。

　　解決辦法：增加display:inline;。

7、清除浮動Ｂug修復

程式碼示例:

#father {

　　　　width:100%;　　　　/*　寬度值可以為固定寬度值　*/

　　　　overflow:hidden;　　

　　}

　　產生條件：父元素未設定浮動，而子元素設定了浮動。

　　顯示效果：父元素高度得不到擴充套件，縮成一條，子元素從容器中溢位。

　　解決辦法：為父元素設定width：寬度值；和overflow:hidden;。