欢迎访问 licqi IT技术
我们一直在努力

IE CSS Bug系列:32样式限制

受影响的版本

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的天然特性,这个演示在一个单独的页面上:(译者注:此处的页面链接有错误,跟前一个演示链接是一样的,明显和下面的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(/[nr]/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/

赞(0) 打赏
未经允许不得转载:licqi IT技术 » IE CSS Bug系列:32样式限制
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏