0

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

我正在考虑扩展画廊 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

这是我想要的外观： 画廊外观

4

2 回答 2

0

Sure. You need output that doesn't use nth-child selectors — which will require some extra classes in your markup. I'd start by copy-pasting the full gallery mixin from Susy, and then only change the mixin name (so it doesn't conflict), and replace any mention of nth-child with your class naming convention (lines 62-63). If you can design class names that matches Susy's existing nth-child pattern, you shouldn't need to change the mixin much.

It might even be possible for us to add this option to the existing mixin. Feel free to file an issue on GitHub, and we'll take a look at it.

UPDATE: Looking closer, there are some simpler options, depending exactly what you need. If you change your gallery declarations to simple spans, you only need to add .last classes/mixins to the last items in each row. And if you change your gutters to inside, inside-static or split you don't even need to do that. Simple spans will stack up correctly on their own.

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

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

  // etc...
}
于 2014-07-10T18:43:52.107 回答
0

好的，我想专门在画廊混合中为 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 中无法设置每行的最后一个元素时。

于 2014-07-22T21:59:56.333 回答