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伪类和属性选择器。只需在您的页面中包含脚本，选择将完成其余的工作。

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;
}

<强> Live example

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

<强>更新

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

Answer 3

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

尽管右边最后一个元素有边距，但是给你的包含容器宽度要适合所有子元素，例如。

#randomidContainer { 
    width: 840px;
}

然后你只需将那个容器包装到另一个容器中，你就可以使用这个技巧，例如：

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

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

这个nth-child选择器在IE 8中如何工作？

3 个答案: