Question

我有一个SASS生成的CSS文件，我使用（sass）@extend来扩展各种引导类。

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

#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()选择器上失败。

为了解决这个问题，我可能会在包含在占位符中的mixin中设置这些样式，然后将该占位符扩展到您需要的任何位置，但是在需要将样式应用于a的情况下: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;
}

IE8忽略了选择器太多的规则

1 个答案: