DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> IE對網頁中引入CSS樣式表的限制
IE對網頁中引入CSS樣式表的限制
編輯:布局實例     

   1、使用link標記

  2、使用style元素

  3、使用@import指令

  4、使用style屬性的內聯樣式(inline style)

  這是紅色的字

  在實際應用中,使用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看:

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

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

  ◆ 一個css文件只有前31次@import指令有效應用。

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

  ◆ 一個CSS文件的不能超過288kb?

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

  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、沒有考慮media這個屬性,如果有多個media應該分別合並,當然更沒有考慮link標記的rel="alternate stylesheet"帶來的影響。但我更建議通過@media指令把相應的樣式寫在同一個文件中,至少可以減少HTTP連接數。

  2、沒有解決@import指令31次限制的問題,其實可以提取其href值然後進行激活處理。但是實際應用在建議用link標記來替代@import指令,應為在IE中@import指令相當與把link標記寫在文檔的底部。

  3、一般來講頁面之所有出現大量的link或者style標簽很可能有很多是相同的,可以在aCssText合並前除掉相同的項,減少代碼量。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved