受影響的版本

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

表現(xiàn)

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

教程日期

2009 8.12 14:58:58 星期三

描述

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

演示

由于該bug的天然特性，這個(gè)演示在一個(gè)單獨(dú)的頁面上：

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 周三

修復(fù)版本

所有受影響的版本

描述

如果你在實(shí)際網(wǎng)站開發(fā)中遇到了這個(gè)問題，你也許不能選擇用“更少的樣式標(biāo)簽”，解決方案可能會(huì)變得更復(fù)雜。基于那個(gè)事實(shí)，在修正的演示中，我會(huì)展示達(dá)到限制條件的情況：

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

HTML 代碼：

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

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

如果<style>元素中的內(nèi)容是靜態(tài)的，你可以簡單地復(fù)制代碼并將它放在限制標(biāo)簽前面的<link>/<style>元素中。

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

$(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 ); 
      } 
    } 
  } 
}); 

請注意，你不應(yīng)使用這段代碼作為此問題的永久性修復(fù)方案。

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

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