CSS之兼容瀏覽器篇

2024-07-11 08:20:11

字體：大中小

供稿：網(wǎng)友

先溫習(xí)一下對(duì)于IE的box-model的破解
IE box-model這個(gè)臭名昭著的bug存在于IE6/Win以前的每一只版本，這個(gè)蟲(chóng)子直到tantak發(fā)布了流傳最為廣泛的那個(gè)hack才開(kāi)始被馴服

http://www.tantek.com/CSS/Examples/boxmodelhack.html

IE5.X/win對(duì)box-model的解析是一樣的，他們認(rèn)為width包括了邊框(border)和補(bǔ)白(padding)，幸運(yùn)的是這個(gè)情況在IE6中有了好轉(zhuǎn)
但是IE6在向后兼容的同時(shí)也包容了以前的錯(cuò)誤，IE6其實(shí)有兩個(gè)核心，在舊的頁(yè)面前他仍舊表現(xiàn)出對(duì)錯(cuò)誤的寬容，只有在文檔中嚴(yán)格地加上文檔類(lèi)型(DOCTYPE)聲明，IE6才能夠接受正確的box-model
所以，tantak的hack必須和正確的DOCTYPE同時(shí)包含在文檔中才能夠正常工作

div.content {
width:400px; //這個(gè)是錯(cuò)誤的width，所有瀏覽器都讀到了
voice-family: """}"""; //IE5.X/win忽略了"""}"""后的內(nèi)容
voice-family:inherit;
width:300px; //包括IE6/win在內(nèi)的部分瀏覽器讀到這句，新的數(shù)值(300px)覆蓋掉了舊的
}
html>body .content { //html>body是CSS2的寫(xiě)法
width:300px; //支持CSS2該寫(xiě)法的瀏覽器有幸讀到了這一句
}

現(xiàn)在回到主題，我們經(jīng)常看到!important和(空格)/**/:組合在一起使用，這個(gè)寫(xiě)法有什么奧妙呢？

看剛才那個(gè)寫(xiě)法，我這里可以提供另一種寫(xiě)法也能達(dá)到這樣的效果

div.content {
width:300px !important; //這個(gè)是正確的width，大部分支持!important標(biāo)記的瀏覽器使用這里的數(shù)值
width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認(rèn)為width的值是300px；而IE5.X/win讀到這句，新的數(shù)值(400px)覆蓋掉了舊的，因?yàn)?important標(biāo)記對(duì)他們不起作用
}
html>body .content { //html>body是CSS2的寫(xiě)法
width:300px; //支持CSS2該寫(xiě)法的瀏覽器有幸讀到了這一句
}

同樣，這個(gè)方法仍必須依靠正確的文檔類(lèi)型聲明才能夠正常工作，原因在前面已經(jīng)說(shuō)過(guò)。

文檔類(lèi)型聲明就像一個(gè)開(kāi)關(guān)，打開(kāi)向后兼容的未來(lái)，而錯(cuò)誤使用的話(huà)，就是一個(gè)Pandora box.
具體的兼容性問(wèn)題查看此圖