在iOS Safari 8上，:nth-child无法正常工作。

Question

我正在使用一台装有iOS 8.02操作系统和iOS Safari 8浏览器的iPad。

.itemgrid-3cols .item:nth-child(3n+1) {
    clear: left;
}

我在浏览器检查器中查看了一下，上述样式规则被iosSafari应用于每个第1、第3、第7、第8和第9个.item

@media only screen and (max-width: 959px) and (min-width: 768px)
   .itemgrid-2cols .item:nth-child(2n+1), .itemgrid-3cols .item:nth-child(2n+1), .itemgrid-4cols .item:nth-child(2n+1), .itemgrid-5cols .item:nth-child(2n+1), .itemgrid-6cols .item:nth-child(2n+1), .itemgrid-7cols .item:nth-child(2n+1) 
   {
       clear: left !important;
   }
}

这个样式规则应用于每个.item元素。媒体查询正常工作。

我正在使用Telerik AppBuilder在Windows上调试设备，但您可以在设备本身上看到它。

这是一个链接到其中一个页面，它仅在ios 8.02和iosSafari 8上发生。我在browser stack、chrome模拟器和旧的iPad 2上使用Safari进行了检查，错误没有发生。

我还检查了caniuse.com，它说:nth-child在iosSafari 8上有效。

为什么这个规则没有被正确应用，您有什么想法吗？

- Holly

Answer 1

再次查看caniuse。

在“已知问题”选项卡中，其中一个问题说：

iOS 8 Safari存在nth-child问题。

所以信不信由你：在iOS 8上nth-child无法使用。

当然的解决方法是使用nth-of-type代替-这个方法可以在iOS 8上使用。

所以（假设.item元素是一个li）你的代码变成：

.itemgrid-3cols li:nth-of-type(3n+1) {
    clear: left;
}

- Danield

---

非常让人烦恼，苹果不会迅速修复这些漏洞，但感谢提供了解决方法！ - Gavin