IE下styleSheet的限制

问题现象：页面加载了五个tag页签，其中有三个页面用到了slickgrid, 页签的内容是异步加载的，点击各个页签，其中一个页签加载时会报如下错误：

定位：

function createCssRules() {
      $style = $("<style type='text/css' rel='stylesheet' />").appendTo("head");
      
      var rowHeight = (options.rowHeight - cellHeightDiff);
      var rules = [
        "." + uid + " .slick-header-column { left: 1000px; }",
        "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",
        "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",
        "." + uid + " .slick-cell { height:" + rowHeight + "px; }",
        "." + uid + " .slick-row { height:" + options.rowHeight + "px; }"
      ];

      for (var i = 0; i < columns.length; i++) {
        rules.push("." + uid + " .l" + i + " { }");
        rules.push("." + uid + " .r" + i + " { }");
      }

      if ($style[0].styleSheet) { // IE
        $style[0].styleSheet.cssText = rules.join(" ");
      } else {
        $style[0].appendChild(document.createTextNode(rules.join(" ")));
      }
    }

IE下出错时，红色代码部分报：意外调用了方法或属性访问。

百思不得其解，页签切换顺序不同，报的错误页面就不一样

后上网搜索styleSheet.cssText，找到如下博文才恍然大悟：

http://www.cnblogs.com/YanPSun/archive/2012/03/16/2400141.html

原来IE8也有31个样式的限制，坑爹

解决思路：把各页签下的style统一抽取到css.css中，避免页签加载时style过多，问题解决。