卡卡網(wǎng)

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

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

.divContent{
    background-color:#eee;
}

那么下面我們就來(lái)寫一下，如何使代碼兼容幾個(gè)主流瀏覽器。

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

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

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

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

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

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

您可能對(duì)以下文章也感興趣

• 不注意這點(diǎn)，\9和\0就可能對(duì)hack IE11\IE9\IE8無(wú)效
• IE7/IE8/IE9/IE11 CSS hack 寫法
• IE11 hack css的符號(hào)原來(lái)是“#”號(hào)
• css巧用兩符號(hào)#和下橫線解決div高寬的瀏覽器兼容性問題

標(biāo)簽: hack