css - IE8 忽略选择器过多的规则

Question

我有一个 SASS 生成的 CSS 文件，我在其中使用 (sass) @extend 来扩展各种 Bootstrap 类。

在某些情况下，这会导致具有大量选择器的样式规则。例如:

#bb .col-xs-1,
#bb .amend .summary-wrapper .summary .summary-item .col-price,
#bb .amend .summary-wrapper .summary-head .summary-item .col-price,
#bb .col-xs-2,
#bb .check-items .summary-wrapper .summary .summary-item .col-edit,
#bb .amend .summary-wrapper .summary .summary-item .col-date,
#bb .amend .summary-wrapper .summary-head .summary-item .col-date,
#bb .col-xs-3,
#bb .check-items .summary-wrapper .summary .summary-item .col-label,
#bb .checkout .summary-wrapper .summary .summary-item .col-label,
#bb .amend .summary-wrapper .summary .summary-item .col-data,
#bb .amend .summary-wrapper .summary-head .summary-item .col-data,
#bb .amend .summary-wrapper .summary .summary-item .col-location,
#bb .amend .summary-wrapper .summary-head .summary-item .col-location,
#bb .amend .summary-wrapper .summary .summary-item .col-edit,
#bb .amend .summary-wrapper .summary-head .summary-item .col-edit,
#bb .col-xs-4,
#bb .day-nav .day-nav-left,
#bb .day-nav .day-nav-title,
#bb .day-nav .day-nav-right,
#bb .col-xs-5,
#bb .col-xs-6,
#bb .col-xs-7,
#bb .check-items .summary-wrapper .summary .summary-item .col-data,
#bb .col-xs-8,
#bb .col-xs-9,
#bb .checkout .summary-wrapper .summary .summary-item .col-data,
#bb .col-xs-10,
#bb .col-xs-11,
#bb .col-xs-12,
#bb .col-sm-1,
#bb .col-sm-2,
#bb .bb-list-item .bb-action,
#bb .week-nav .week-nav-left,
#bb .week-nav .week-nav-right,
#bb .service-list .filters .filter-col,
#bb .col-sm-3, #bb .bb-label,
#bb .field.field-sml,
#bb .field.field-select,
#bb .field.field-big + .messages,
#bb .booking-questions .form-group.child:nth-child(even) .field,
#bb .col-sm-4,
#bb .field,
#bb .field + .messages,
#bb .field.field-sml + .messages,
#bb .bb-big-picker .left,
#bb .checkout .summary-wrapper .booking-options,
#bb .schedule-beauty .date-select .date-picker,
#bb .schedule-beauty .date-select .date-nav,
#bb .schedule-beauty .treatments .treatment.third,
#bb .amend .summary-wrapper .booking-options,
#bb .col-sm-5,
#bb .bb-store-block,
#bb .bb-label.bb-label-big,
#bb .booking-questions .form-group.child:nth-child(even) .bb-label,
#bb .col-sm-6,
#bb .category-container .category .category-content,
#bb .category-container .category .category-image,
#bb .field.field-big,
#bb .booking-questions .form-group.child:nth-child(odd) .bb-label,
#bb .booking-questions .form-group.child:nth-child(odd) .field,
#bb .check-items .summary-wrapper .summary,
#bb .check-items .summary-wrapper .summary-notes,
#bb .schedule-beauty .treatments .treatment.half,
#bb .col-sm-7, #bb .bb-map-wrapper,
#bb .col-sm-8,
#bb .bb-list-item .bb-txt,
#bb .bb-big-picker .right,
#bb .week-nav .week-nav-title,
#bb .checkout .summary-wrapper .summary,
#bb .col-sm-9, #bb .field.field-huge,
#bb .submit-col,
#bb .info-box-field-wrapper,
#bb .col-sm-10,
#bb .col-sm-11,
#bb .col-sm-12,
#bb .bb-list-item .bb-txt-big,
#bb .bb-store-block .stores .store,
#bb .bb-question-heading,
#bb .amend .summary-wrapper .summary,
#bb .amend .summary-wrapper .summary-head,
#bb .col-md-1, #bb .col-md-2,
#bb .col-md-3,
#bb .col-md-4,
#bb .col-md-5,
#bb .col-md-6,
#bb .col-md-7,
#bb .col-md-8,
#bb .col-md-9,
#bb .col-md-10,
#bb .col-md-11,
#bb .col-md-12,
#bb .col-lg-1,
#bb .col-lg-2,
#bb .col-lg-3,
#bb .col-lg-4,
#bb .col-lg-5,
#bb .col-lg-6,
#bb .col-lg-7,
#bb .col-lg-8,
#bb .col-lg-9,
#bb .col-lg-10,
#bb .col-lg-11,
#bb .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

在我的测试中，IE8 似乎忽略了这条规则。我知道 4095 rule limit in IE8 , 但在运行 blesscss 之后，这似乎不是问题，因为它报告说我总共只有 2,904 条规则。似乎 IE 忽略了该规则，因为有太多的选择器与之关联。

这个问题有解决办法吗？或者我应该考虑采用不同的方法吗？

Answer 1

IE8 会忽略任何包含不受支持的选择器的 CSS 声明。在这种情况下，看起来它可能在 :nth-child() 选择器上失败了。

为了解决这个问题，我可能会在你包含在占位符中的混合中设置这些样式，然后在你需要的任何地方扩展该占位符，但在你需要将样式应用于 :nth-child，包含 mixin 而不是扩展占位符。例如:

@mixin mystyles {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

%styled {
  @include mystyles;
}

.goodSelector {
  @extend %styled;
}

.formGroup:nth-child(even) {
  @include mystyles;
}