css屬性兼容主流瀏覽器

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

名詞解釋：

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

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

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

一、ＩＥ有條件註釋

　　代碼示例：

　　　　<!-- [ if IE8 ] >

　　　　　　<style>

　　　　　　　　@import " test.css";

　　　　　　</style>

　　　　<! [endif] -->

　　　　在語法中：

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

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

二、子選擇器招數

　　代碼示例：

　　html>body {

　　　　background-image:url(bg.png);

　　}

　　在語法中:

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

三、*html招數

　　*html {

　　　　font-size:14px;

　　}

　　在語法中：

　　*html:針對ie6及其如下版本，設置字號爲14像素。

四、!important招數

　　代碼示例：

　　#nav {

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

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

　　}

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

五、針對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.

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

　　代碼示例：

　　#nav {

　　　　float:left;

　　　　margin:10px;

　　　　display:inline;

　　}

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

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

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

七、清除浮動Ｂug修復

　　代碼示例:

　　#father {

　　　　width:100%;　　　　/*　寬度值能夠爲固定寬度值　*/

　　　　overflow:hidden;　　

　　}

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

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

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