卡卡網(wǎng)

網(wǎng)站兼容性調試實在令人煩心，現(xiàn)在的網(wǎng)站設計人員真的要比以前費力很多，因為網(wǎng)頁代碼不再是只需滿足一個IE6訪問就行，而是要滿足N多的瀏覽器訪問正常才行。粗略算一下，目前至少要滿足如下的瀏覽器要求：IE8、IE9、IE10、IE11、Chrome、Firefox，由于360使用的是Chrome內核，所以滿足Chrome基本就滿足了360。而IE家族真是一個版本一個樣，我說IE怎么這么喜歡折騰呢？這給網(wǎng)頁設計師帶來多大的麻煩呀！今天，我就把這幾個主要瀏覽器的CSS hack代碼匯總一下。

例如現(xiàn)有CSS代碼如下：

.divContent{
    background-color:#eee;
}

那么下面我們就來寫一下，如何使代碼兼容幾個主流瀏覽器。

/* IE8+ */
.divContent{
    background-color:#eee\0;
}

/* IE8、IE9 */
.divContent{
    background-color:#eee\8\9\0;
}

/* IE9 */
.divContent{
    background-color:#eee\9\0;
}

注意，\8\0的寫法是錯誤的，不能試圖這樣hack IE8。上述代碼沒有對IE10和IE11分別hack（好像沒有對這兩個瀏覽器單獨hack的寫法），那么IE10和IE11使用的就是IE8+那個樣式。

IE家族hack完畢，下面看看如何hack Chrome和Firefox瀏覽器。

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .divContent{
        background-color:#eee;
    }
}

/* Firefox */
@-moz-document url-prefix() {
    .divContent{
        background-color:#eee;
    }
}

另外，還可以這樣hack其他瀏覽器

/* Chrome 和 opera */
@media all and (min-width:0){
    .divContent{
        background-color:#eee;
    }
}

/* IE9+ */
@media all and (min-width:0) {
    .divContent{
        background-color:#eee;
    }
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)  {
    .divContent{
        background-color:#eee;
    }
}

經過這樣hack，網(wǎng)站瀏覽器兼容性問題就可以完美解決了。

您可能對以下文章也感興趣

• 不注意這點，\9和\0就可能對hack IE11\IE9\IE8無效
• IE7/IE8/IE9/IE11 CSS hack 寫法
• IE11 hack css的符號原來是“#”號
• css巧用兩符號#和下橫線解決div高寬的瀏覽器兼容性問題

標簽: hack