首頁 web前端 css教學 IE對CSS樣式表的限制與解決方案

IE對CSS樣式表的限制與解決方案

Oct 19, 2017 am 10:38 AM
css 解決方案

HTML文件與CSS的關聯常見有4種方式:

  1. #使用link標記

    #
    <link rel="stylesheet" type="text/css" href="sheet.css" />
    登入後複製
  2. 使用style元素

    <style type="text/css">
    body{background:#fff;}
    h1{font-size:2em;}
    </style>
    登入後複製
  3. 使用@import指令

    <style type="text/css">
    @import url(sheet1.css);
    @import "sheet2.css";
    </style>
    登入後複製
  4. 使用style屬性的內聯樣式(inline style)

    <p style="color:#f00;">这是红色的字</p>
    登入後複製

在實際應用中,使用style屬性的內聯樣式是不建議使用的,XHTML1.1已經將其標準為不建議使用,原因很簡單這種方式不比font標記強多少,削弱了CSS集中控制整個文件外觀的優點。前3種方式利用了link標記和style標記,在IE(包括IE6、IE7和IE8 beta1)中有以下限制:

  1. 文件中只有前31個link或style標記關聯的CSS能夠應用。

    從第32個開始,其標記關聯的CSS都會失效。 IE的官方文件All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及這個限制,包括在使用.xsl的.xml檔案也有這個限制。但是似乎寫錯數量了。請在IE看:

    範例1:34個style標記同時應用

    範例2:1個style標記和34個link標記同時應用

  2. 一個style標記只有前31次@import指令有效應用。

    從第32個@import指令開始忽略。請看:

    範例3:在一個style標記中使用34次@import指令。

  3. 一個css檔案只有前31次@import指令有效應用。

    從第31個@import指令開始忽略。請看:

    範例4:用link標記引入一個使用34次@import指令的css檔案

    例5:用style標記引入一個使用34次@import指令的css檔案

    範例6:用link和style標記分別引入一個使用31次@import指令以上的css檔案

  4. 一個CSS檔案的不能超過288kb?

    這個訊息來自Internet Explorer CSS File Size Limit。

  5. @import指令下層疊限制不能超過4層

    在IE下透過@import指令引入css檔案時,第5層會失效。這個限制來自Cascade limit via @import rule。實際上,由於瀏覽器對多層嵌套的支援不完善,所以即使不得已使用了@import指令引入CSS文件,也不要超過2層。

IE對CSS的限制在絕大部分情況下是不會遇到的,即使遇到最佳的解決方案也應該是手動或透過後端程式對CSS文件和回應的標記進行合併,最小化的http請求數是最佳化頁面呈現的第一原則。

在IE中,可以透過document.styleSheets物件(Firefox、Opera9和Safari3.1都支援)修改內聯和嵌入樣式的值。此物件只在文件包含style或link元素時可用,其實用document.styleSheets.length就可以看出IE下這個值最大是31。以下是利用Javascript來合併linkstyle標記來解決IE下的限制:

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
    return;
}
var aSheet = document.styleSheets,
    aStyle = document.getElementsByTagName(&#39;style&#39;),
    aLink  = document.getElementsByTagName(&#39;link&#39;);
    if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){        //document.styleSheets.cssText 只有IE支持 
        return;
    }
    var aCssText = [],aCloneLink = [];    //把style标签中的样式存入,然后删掉该标签,但保留第一个
    //因为由getElementsByTagName方法返回值是nodeList,所以删除时循环用倒序
    for(var i=aStyle.length-1;i>-1;--i){
        var o = aStyle[i];
            aCssText.push(o.innerHTML);
            if(i>0){
                o.parentNode.removeChild(o);
            }
    }    //在IE中只有在31之内的link标签才能通过其styleSheet.cssText获取样式
    //无法的获取复制到一个数组aCloneLink中
    for(var i=aLink.length-1;i>-1;--i){
       var o = aLink[i];
          if(o.getAttribute && o.getAttribute(&#39;rel&#39;)===&#39;stylesheet&#39;){
               if(o.styleSheet){
                  aCssText.push(o.styleSheet.cssText);
               }else{
                   aCloneLink.push(o.cloneNode(true));
               }
               if(i>0){
                   o.parentNode.removeChild(o);
               }
          }
    }
    var oHead = document.getElementsByTagName(&#39;head&#39;)[0];    //通过前面的删除,前31个link或者style标记最多只剩下2个
    //通过重新增加link节点的方法激活其styleSheet属性,从而获取样式
    for(var i = aCloneLink.length-1;i>-1;--i){
        var o = aCloneLink[i];
        oHead.appendChild(o);
        aCssText.push(o.styleSheet.cssText);
        oHead.removeChild(o);
    }   //把所有的样式都复制给第一个标签
    aSheet[0].cssText += aCssText.join(&#39;&#39;);
}
登入後複製

上面只是一個簡單的粗糙的解決方案,示範請看例1和例2,可以改進的地方還有:

  1. 沒有考慮media這個屬性,如果有多個media應該分別合併,當然更沒有考慮link標記的rel="alternate stylesheet"帶來的影響。但我更建議透過@media指令把對應的樣式寫在同一個檔案中,至少可以減少HTTP連線數。

  2. 沒有解決@import指令31次限制的問題,其實可以擷取其href值然後進行啟動處理。但實際應用在建議用link標記來取代@import指令,因為在IE中@import指令相當與把link標記寫在文件的底部,會導致在IE5/6頁面載入時瞬間無樣式問題,學名叫「Flash of Unstyled Content」(簡稱FOUC)的bug,當然可以透過在文件頭中放一個link或script元素可以避免這個bug。

  3. 一般來講頁面之所有出現大量的linkstyle標籤很可能有很多是相同的,可以在aCssText合併前除掉相同的項,減少代碼量。

如果不用DOM中已存在的樣式元素直接透過cssText屬性添加樣式程式碼,而是建立一個新的樣式元素來添加,請務必注意先把新建的樣式元素先加入DOM中,然後再透過cssText屬性加入樣式程式碼。反之,其添加的樣式程式碼似乎先被IE6的樣式解析器解析後才添加,這樣!imporant和hack都將失效。請看範例7。不建議透過添加新的樣式元素的方式來添加新的樣式,這樣很容易達到IE的限制條件。

以上是IE對CSS樣式表的限制與解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1658
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1231
24
vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

See all articles