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

來源:互聯網
上載者:User

標籤:速度   header   ie10   lin   --   不同   lan   方便   檔案中   

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 那樣,造成浪費;

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

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.