針對IE瀏覽器的CSS樣式(兼容性)


1. IE hacks:

"_"  是IE6 專有的hack;
"\9" 對IE6-IE10都有效;
"\0"對IE8-IE10都有效;
"\9\0"對IE9-IE10都有效;

    優點:

           CSS hacks 內嵌在普通的 CSS 里面,不會產生更多 HTTP 請求。CSS hacks 內嵌在普通的 CSS 里面,編寫時比較方便。

    缺點:

     它是不標准的產物。內嵌在其他 CSS 中,不便維護。尤其是當 hacks 的數量比較多的時候維護簡直是個惡夢。內嵌在其他 CSS 中,即使在非 IE 瀏覽器中也會被加載,浪費資源。

2.條件注釋 CSS:

<!--[if IE 6 ]>
   < link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
< ![endif]-->

<!--[if lte IE 8 ]>
   <link rel="stylesheet" type="text/css" media="all" href="./assets/css/ie8.css" />
<![endif]-->

       條件注釋是一種 IE 專有的、對常規(X)HTML 注釋的 Miscrosoft 擴展。從 W3C 標准來說,它也是不標准的產物,但它是微軟官方推出的針對 IE 進行開發的方式,

  並且條件注釋對於其他所有瀏覽器作為常規注釋出現,因此對其他瀏覽器無害

   優點:

  條件注釋 CSS 的好處是在獨立的 CSS 文件中編寫,能准確控制在特定的 IE 中加載,不會造成資源浪費,並且便於維護。

   缺點:

       就是會產生多余的 HTTP 請求,尤其是當你需要兼容的 IE 版本很多的時候,你就需要產生多個 HTTP 請求,這對於本來通道數目就少的低版本 IE 來說無疑會影響頁面加載速度。

                      以上兩種方法不是很好,以下的方法相對來說會好點;

3.條件注釋 html 標簽:

  這種方案也是利用條件注釋,但並不是對 CSS 使用條件注釋,而是對 html 標簽使用條件注釋,引入不同的 class ,從而區分不同的 IE 以及其他瀏覽器;

<!DOCTYPE html>  
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->  

   然后把對特定 IE 的 CSS 加上相應的 class 並寫在普通 CSS 文件里即可: .ie6 .header .nav {margin:0 0 0 ;padding:0 0 0 0; }

  優點:

    條件注釋表達式的好處在於不會產生多余的 HTTP 請求;

  缺點:

    由於這些針對特定 IE 的 CSS 與普通的 CSS 放在一起,即不是相應的 IE 也會被加載,因此如果 CSS 數目比較多的話就會像使用 hacks 那樣,造成浪費;

                      以上方法:需要根據具體情況選擇方法。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM