IE CSS Bug系列：32样式限制-css样式兼容ie

受影响的版本

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/