Question

我想知道是否有人有解决方案。我想要一个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无法识别nth-of-type选择器。有没有办法

让IE8一起玩。 Selectivizr不会用jQuery和我不想介绍另一个图书馆
仅为IE8使用其他一些条件CSS
JavaScript的？

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

Answer 1

在这种情况下，我会使用负边际方法。

    .gallery {
       list-style-type: none;
       margin-left: -26px;
    }
    .gallery li {
        float: left;
        height: 130px;
        width: 130px;
        margin-bottom: 26px;
        margin-left: 26px;
    }

Answer 2

您可以尝试使用ie7.js | ie8.js | ie9.js代替Selectivizr。

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

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

CSS均匀分布图像行，可在IE8中使用

2 个答案: