IE對CSS樣式表的限制與解決方案
HTML文件與CSS的關聯常見有4種方式:
-
#使用link標記
#<link rel="stylesheet" type="text/css" href="sheet.css" />
登入後複製 使用style元素
<style type="text/css"> body{background:#fff;} h1{font-size:2em;} </style>
登入後複製使用@import指令
<style type="text/css"> @import url(sheet1.css); @import "sheet2.css"; </style>
登入後複製使用style屬性的內聯樣式(inline style)
<p style="color:#f00;">这是红色的字</p>
登入後複製
在實際應用中,使用style屬性的內聯樣式是不建議使用的,XHTML1.1已經將其標準為不建議使用,原因很簡單這種方式不比font標記強多少,削弱了CSS集中控制整個文件外觀的優點。前3種方式利用了link標記和style標記,在IE(包括IE6、IE7和IE8 beta1)中有以下限制:
文件中只有前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標記同時應用
一個style標記只有前31次
@import
指令有效應用。從第32個@import指令開始忽略。請看:
範例3:在一個style標記中使用34次
@import
指令。一個css檔案只有前31次@import指令有效應用。
從第31個@import指令開始忽略。請看:
範例4:用link標記引入一個使用34次
@import
指令的css檔案例5:用style標記引入一個使用34次
@import
指令的css檔案範例6:用link和style標記分別引入一個使用31次
@import
指令以上的css檔案一個CSS檔案的不能超過288kb?
這個訊息來自Internet Explorer CSS File Size Limit。
@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來合併link
和style
標記來解決IE下的限制:
var fnMergeStyleSheet = function(){ if(!document.styleSheets){ return; } var aSheet = document.styleSheets, aStyle = document.getElementsByTagName('style'), aLink = document.getElementsByTagName('link'); 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('rel')==='stylesheet'){ 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('head')[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(''); }
上面只是一個簡單的粗糙的解決方案,示範請看例1和例2,可以改進的地方還有:
沒有考慮
media
這個屬性,如果有多個media
應該分別合併,當然更沒有考慮link
標記的rel="alternate stylesheet"
帶來的影響。但我更建議透過@media
指令把對應的樣式寫在同一個檔案中,至少可以減少HTTP連線數。沒有解決@import指令31次限制的問題,其實可以擷取其href值然後進行啟動處理。但實際應用在建議用
link
標記來取代@import指令,因為在IE中@import
指令相當與把link標記寫在文件的底部,會導致在IE5/6頁面載入時瞬間無樣式問題,學名叫「Flash of Unstyled Content」(簡稱FOUC)的bug,當然可以透過在文件頭中放一個link或script元素可以避免這個bug。一般來講頁面之所有出現大量的
link
或style
標籤很可能有很多是相同的,可以在aCssText合併前除掉相同的項,減少代碼量。
如果不用DOM中已存在的樣式元素直接透過cssText屬性添加樣式程式碼,而是建立一個新的樣式元素來添加,請務必注意先把新建的樣式元素先加入DOM中,然後再透過cssText屬性加入樣式程式碼。反之,其添加的樣式程式碼似乎先被IE6的樣式解析器解析後才添加,這樣!imporant和hack都將失效。請看範例7。不建議透過添加新的樣式元素的方式來添加新的樣式,這樣很容易達到IE的限制條件。
以上是IE對CSS樣式表的限制與解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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