susy 2 gallery mixin 与 IE8 不兼容。解决方法？答案

【问题标题】：susy 2 gallery mixin is incompatible with IE8. Workaround?susy 2 gallery mixin 与 IE8 不兼容。解决方法？
【发布时间】：2014-07-08 18:48:50
【问题描述】：

因此，susy2 中超级有用的 'gallery' mixin 使用了 nth-child 选择器，这在 IE8 中不起作用。那么有什么好的解决方法呢？

我正在考虑扩展 Gallery mixin 并添加特定于 ie8 的样式。 susy 可以吗？

这是我的 sass 代码，如果有帮助的话：

.grid_gallery li.slide {
  @include gallery(12 of 24); //2 across
  margin-bottom: gutter(24);
  @include breakpoint(600px) {
    @include gallery(6 of 24); //4 across
  }
  @include breakpoint(769px) {
    @include gallery(4.8 of 24); //5 across
  }
  @include breakpoint(1200px) {
    @include gallery(4 of 24); //6 across
  }
}

这里是看到这个 SASS（简化）转换为 css 的要点：http://sassmeister.com/gist/59927698cfbba6fadbf5

这是我想要的外观：

【问题讨论】：

标签： internet-explorer-8 susy-sass

【解决方案1】：

当然。您需要不使用 nth-child 选择器的输出——这将需要在您的标记中添加一些额外的类。我首先复制粘贴the full gallery mixin from Susy，然后只更改mixin 名称（所以它不会冲突），并用你的类命名约定替换任何提到的nth-child（第62-63 行）。如果您可以设计与 Susy 现有的 nth-child 模式匹配的类名，则不需要对 mixin 进行太多更改。

我们甚至可以将此选项添加到现有的 mixin 中。随时在 GitHub 上提交问题，我们会查看它。

更新：仔细观察，有一些更简单的选项，具体取决于您的需要。如果您将画廊声明更改为简单跨度，则只需将.last classes/mixins 添加到每行的最后一项。如果您将排水沟更改为inside、inside-static 或split，您甚至不需要这样做。简单的 span 会自行正确叠加。

.item {
  @include span(12 of 24 inside); // 2 across

  @include breakpoint(600px) {
    @include span(6 of 24 inside); // 4 across
  }

  // etc...
}

【讨论】：

谢谢，但我不能使用 inside（或 inside-static 或 split），因为那样会稍微改变设计。并且“.last”是不可用的，因为画廊项目是动态的并且来自 cms。虽然只有 ie8 的“内部”解决方案是我现在的目标。我添加了一个 custom_gallery mixin，现在我正在尝试添加一个“if ie8”使用“inside gutters”功能。

【解决方案2】：

好的，我想专门在画廊 mixin 中为 IE8 编写样式以切换到“内部”排水沟，但我就是不知道该怎么做。

我只是在我的 IE 样式表中添加了以下内容：

.ie8 .grid_gallery li.slide {
  @include span(4 of 24 inside); // ie8 needs to switch to an 'inside' gutter system. It doesn't handle nth-child css
}

因此，这个 span 混合添加到前面调用的一些库混合样式中。基本上，仅在 IE8 中将其更改为内部装订线设置。

当我真的需要时，我已经切换到仅使用画廊混合，例如当 cms 生成的项目数量未知时，或者在 html 中无法设置每行的最后一个元素时。

【讨论】：