受影響的版本

IE6，IE7，IE8（譯者注：在IE9中切換瀏覽器版本為7、8、9均出現此bug，在IE11中切換瀏覽器版本均沒有出現該bug，這個…..僅供參考）

表現

排在第32個（及之后的）樣式會被忽略（例如<style>、<link>或@import）

教程日期

2009 8.12 14:58:58 星期三

描述

如果你正在維護一個網站，里面包含了很多第三方的廣告或應用程序，這些第三方的東西會依賴于他們自己的<style>（或<link>）元素，本文中的bug就會令你抓狂…..我這里說的很多意思是32個。讓我們來看看下面的演示，然后我再解釋。

演示

由于該bug的天然特性，這個演示在一個單獨的頁面上：

HTML Code：

<style type="text/css"></style> <!--1--> 
<style type="text/css"></style> <!--2--> 
<style type="text/css"></style> <!--3--> 
<style type="text/css"></style> <!--4--> 
<style type="text/css"></style> <!--5--> 
<style type="text/css"></style> <!--6--> 
<style type="text/css"></style> <!--7--> 
<style type="text/css"></style> <!--8--> 
<style type="text/css"></style> <!--9--> 
<style type="text/css"></style> <!--10--> 
<style type="text/css"></style> <!--11--> 
<style type="text/css"></style> <!--12--> 
<style type="text/css"></style> <!--13--> 
<style type="text/css"></style> <!--14--> 
<style type="text/css"></style> <!--15--> 
<style type="text/css"></style> <!--16--> 
<style type="text/css"></style> <!--17--> 
<style type="text/css"></style> <!--18--> 
<style type="text/css"></style> <!--19--> 
<style type="text/css"></style> <!--20--> 
<style type="text/css"></style> <!--21--> 
<style type="text/css"></style> <!--22--> 
<style type="text/css"></style> <!--23--> 
<style type="text/css"></style> <!--24--> 
<style type="text/css"></style> <!--25--> 
<style type="text/css"></style> <!--26--> 
<style type="text/css"></style> <!--27--> 
<style type="text/css"></style> <!--28--> 
<style type="text/css"></style> <!--29--> 
<style type="text/css"></style> <!--30--> 
<style type="text/css"></style> <!--31--> 
<style type="text/css">p { border: 5px solid #000; }</style> <!--32--> 
  
<p>I should have borders!</p> 

解決方案

以下是針對此bug的解決方案

方案（偽bug）

教程日期

2009 8.12 15:28:11 周三

修復版本

所有受影響的版本

描述

如果你在實際網站開發中遇到了這個問題，你也許不能選擇用“更少的樣式標簽”，解決方案可能會變得更復雜。基于那個事實，在修正的演示中，我會展示達到限制條件的情況：

由于該bug的天然特性，這個演示在一個單獨的頁面上：（譯者注：此處的頁面鏈接有錯誤，跟前一個演示鏈接是一樣的，明顯和下面的html代碼不符）

HTML 代碼：

<style type="text/css">p { border: 5px solid #000; }</style> <!--1--> 
  
<p>I should have borders!</p> 

如果你不能采取“使用更少的樣式標簽”的解決辦法，問題就會變得更復雜。最好的方案就是采用一個后處理，將超量的樣式進行合并放入一個style里（如將多個<style>元素中的樣式放入一個<style>元素中）。

如果<style>元素中的內容是靜態的，你可以簡單地復制代碼并將它放在限制標簽前面的<link>/<style>元素中。

如果你已經火燒眉毛，需要一個快速修復方法的話，下面是我在the page where I found the bug找到的一段jQuery代碼，我沒有測試過這段代碼，所以使用者風險自負哦~代碼是這樣的：

$(document).ready(function(){ 
  // If msie and we have more than the allotted stylsheets... 
  if ( $.browser.msie && $('style').length != document.styleSheets.length ) { 
    var ssAry = $('style'); 
    // Loop through the extra stylesheets not read and apply the styles found 
    for ( var i = document.styleSheets.length; i < ssAry.length; i++ ) { 
      var cssText = ssAry[ i ].innerHTML; 
      // Replace newlines and then comments 
      cssTextcssText = cssText.replace(/[\n\r]/g, ""); 
      cssTextcssText = cssText.replace(/\/\*\**[^\*\/]*\*\//g, ""); 
  
      // Loop over all CSS selector groups... 
      var regex = new RegExp(/{[^}]*}/); 
      for ( var value = regex.exec( cssText ); value; value = regex.exec( cssText ) ) { 
        // Split the css grouping into the selector and the CSS properties 
        var pair = cssText.substring( 0, regex.lastIndex ) 
                          .replace(/}/g, "").split(/{/); 
        // Add it to the last DOM stylesheet 
        document.styleSheets[ document.styleSheets.length - 1 ].addRule( 
          pair[ 0 ].replace(/^\s+|\s+$/g, ""), 
          pair[ 1 ].replace(/^\s+|\s+$/g, "") 
        ); 
        // Strip off the applied CSS 
        cssTextcssText = cssText.substring( regex.lastIndex ); 
      } 
    } 
  } 
}); 

請注意，你不應使用這段代碼作為此問題的永久性修復方案。

原文鏈接：http://haslayout.net/css/32-Styles-Limitation

譯文鏈接：http://blog.jobbole.com/48353/