jQuery：第 n 个子选择器在 ie7 中不起作用答案

【问题标题】：jQuery: nth-child selector not working in ie7jQuery：第 n 个子选择器在 ie7 中不起作用
【发布时间】：2012-11-16 03:40:07
【问题描述】：

所以我有一个 div 网格，并非所有高度都相等，我需要它们全部正确排列。我使用了 nth-child jQuery 选择器（见下文）来选择每行的第一个 div 并对其应用 clear:both 样式。这适用于 ie8 及更高版本以及 chrome 和 safari，但在 ie7 中它只是忽略第 n 个子位，因此不应用我的 css。

我在 css3 上使用了 jQuery，所以它可以在 ie7 中工作 - 所以我对它不是这样的事实感到有点困惑..

请在http://jackbeck.co.uk/?portfolio=courses查看自己的html

标头中的jQuery代码：

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.project.small:nth-child(4n+1)').css("clear", "both");
    });
</script>'

有人可以帮忙吗？

【问题讨论】：

如果所有的缩略图都只是一个接一个地排列，为什么你需要 clear:both？浮动：左和容器的宽度不会为您处理吗？
你不应该需要任何 Javascript 来解决这个问题。
如果您习惯使用 Jquery，那么这里就是解决方案。 stackoverflow.com/a/8194206/175111

标签： jquery css internet-explorer-7 css-selectors

【解决方案1】：

是的； IE8 及以下不支持nth-child 伪选择器。但是如果你想要IE support，那么你必须使用http://selectivizr.com/ js。

【讨论】：

【解决方案2】：

您的 jQuery 不起作用，因为您使用的是 $ 而不是 jQuery（这是 WordPress 的东西）。试试这个：

<script type="text/javascript">
    jQuery(document).ready(function($){
        jQuery('.project.small:nth-child(4n+1)').css("clear", "both");
    });
</script>

事实上，jQuery 选择器本身可以在 IE7 中工作。那不是你的问题。您的问题更多地与 CSS 有关。

【讨论】：

好的，感谢您的快速回复 :) 我按照您的建议进行了更改，但仍然不满意 - 还有什么问题吗？
就像我说的，jQuery 不是问题。最简单的解决方案是将每 4 个项目包装成一个<div class="clearfix"></div>。废弃 jQuery/clear 的东西。那应该可以。
是的，那将是理想的 :) 但是当每个项目都是由 wordpress 生成时，是否可以这样做？
一切皆有可能！您必须查看主题中的模板，该模板打印出项目并在那里进行必要的更改。

【解决方案3】：

不幸的是 IE7 doesn't support nth-child 选择器。

【讨论】：

虽然nth-child 选择器不适用于 CSS，但它应该适用于 jQuery。