2

我想知道是否有人对此有解决方案。我想要一个 6 列乘两行的图像网格。目前它工作正常： http: //oaeyewear.4pixels.co.uk/brands.html 我正在使用：

.gallery {
   list-style-type: none;
}
.gallery li {
    float: left;
    height: 130px;
    width: 130px;
    margin-bottom: 26px;
    margin-right: 26px;
}
.gallery li:nth-of-type(6n+0) {
    margin-right: 0px;
}

但我知道 IE8 不会识别第 n 个类型的选择器。有没有办法

  1. 让 IE8 一起玩。Selectivizr 不会用 jQuery 做这个，我不想引入另一个库
  2. 只为 IE8 使用其他一些条件 CSS
  3. javascript？

理想情况下，该解决方案需要响应式工作，因为该站点基于 Foundation Framework。目前它运行良好，因为它可以缩小到两列，我可以<li>使用媒体查询更改它以跨 300 像素工作。

4

2 回答 2

1

在这种情况下，我将使用负边距方法。

    .gallery {
       list-style-type: none;
       margin-left: -26px;
    }
    .gallery li {
        float: left;
        height: 130px;
        width: 130px;
        margin-bottom: 26px;
        margin-left: 26px;
    }
于 2013-02-11T20:24:59.220 回答
0

您可以尝试使用ie7.js | ie8.js | ie9.js而不是 Selectivizr。

这确实支持nth-of-type为 IE 添加，而不需要任何其他库。

另一方面，它还实现了一大堆其他功能并修复了 IE，这可能是您想要的，也可能不是您想要的。如果您使用其他 polyfill，则需要检查它是否不冲突。不过值得一试。

于 2013-02-11T20:37:01.787 回答