css - 这个第 n 个子选择器如何在 IE 8 中工作？

Question

这是我的 div 容器：

#randomid { 
margin-right:40px;
margin-bottom:35px; 
float:left;
} 

里面有 12 个元素（2 行）。我需要从最右边（每六分之一）中删除边距。

所以我得到了这个伪选择器：

#randomid:nth-child(6n+6) {
    margin-right: 0; 
}

如何在不使用 javascript 的情况下在 IE 8 中进行这项工作？

Answer 1

您可以使用选择性。它是一个 JavaScript 实用程序，在 Internet Explorer 6-8 中模拟 CSS3 伪类和属性选择器。只需将脚本包含在您的页面中，剩下的就交给 selectivizr。

http://selectivizr.com/

交替

您可以使用 first-child 和“+”来模拟 nth-child，例如：

tr>td:first-child + td + td + td + td + td + td + td + td{background-color:red}

选择第 9 列，就像 nth-child(9) 一样，适用于 IE

Answer 2

与其使用这样一个复杂的 CSS 选择器，其缺点是在旧版浏览器中缺乏支持，但有一些可能的解决方法可供研究。我整理了一个小例子，说明如何在不使用选择器的情况下实现我认为的预期结果。

下面的示例将在每行上有六个元素，每个元素之间有一个边距，但在每行的第一个元素之前或最后一个元素之后没有边距。

标记：

<div class="foo">
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="bar">A</div>
    <div class="clear"></div>
</div>

CSS：

.foo {
    background-color: #ccc;
    width: 180px;
    margin: 0 -10px;
}

.bar {
    background-color: #888;
    float: left;
    margin-left: 10px;
    width: 20px;
}

.clear {
    clear: both;
}

活生生的例子

它可能不是您想要的，但它至少可以作为您适应和进一步发展的起点。

更新：

有更好的方法来清除浮动，可以用来代替我的示例中使用的额外元素（我只是为了简单起见）。如果有兴趣，这里有一个关于这个的问题。

Answer 3

实际上有一个很好的技巧可以使这项工作完全跨浏览器。

为您的容器提供这样的宽度，即使右侧最后一个元素有边距，您也可以将所有子元素放入其中，例如

#randomidContainer { 
    width: 840px;
}

然后，您只需将该容器包装到另一个容器中，您就可以使用它来执行以下技巧：

#randomidOuterContainer { 
    width: 800px;
    border: 1px solid #000;
    overfliw: hidden;
}

这将（有点）神奇地使您的内部浮动元素在一行上很好地运行，尽管右侧有可能不适合您的像素完美布局的额外边距。