因為萬惡的 IE 存在各種的不標(biāo)準(zhǔn),因此,在進(jìn)行頁面開發(fā)時不免要為 IE 單獨寫一些 CSS 。熟悉的方法有 IE hacks 和條件注釋 CSS(Conditional Stylesheets),下面,不妨討論一下這兩種方法的優(yōu)缺點。
IE hacks
舉個例子,一個元素在其他瀏覽中的左邊距是 30px ,而在 IE6 中則設(shè)置為 20px ,可以如下編寫:
1.CSS hacks 內(nèi)嵌在普通的 CSS 里面,不會產(chǎn)生更多 HTTP 請求。
2.CSS hacks 內(nèi)嵌在普通的 CSS 里面,編寫時比較方便。
當(dāng)然,它的缺點也很明顯——
1.它是不標(biāo)準(zhǔn)的產(chǎn)物。
2.內(nèi)嵌在其他 CSS 中,不便維護(hù)。尤其是當(dāng) hacks 的數(shù)量比較多的時候維護(hù)簡直是個惡夢。
3.內(nèi)嵌在其他 CSS 中,即使在非 IE 瀏覽器中也會被加載,浪費資源。
條件注釋 CSS
同樣是上面的例子,如果使用條件注釋 CSS ,可以如下編寫:
HTML:
條件注釋 CSS 的好處是在獨立的 CSS 文件中編寫,能準(zhǔn)確控制在特定的 IE 中加載,不會造成資源浪費,并且便于維護(hù)。缺點就是會產(chǎn)生多余的 HTTP 請求,尤其是當(dāng)你需要兼容的 IE 版本很多的時候,你就需要產(chǎn)生多個 HTTP 請求,這對于本來通道數(shù)目就少的低版本 IE 來說無疑會影響頁面加載速度。
顯然,以上兩種方法都不是很好的方法,因此,接下來介紹一種相對來說更好的解決方案。
條件注釋 html 標(biāo)簽
這種方案也是利用條件注釋,但并不是對 CSS 使用條件注釋,而是對 html 標(biāo)簽使用條件注釋,引入不同的 class ,從而區(qū)分不同的 IE 以及其他瀏覽器。例如: