：nth-​​child没有在ios Safari 8上工作

Question

我正在使用带有ios 8.02和iosSafari 8的iPad。

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

我在浏览器检查器中检查过，iosSafari正在将样式规则应用于每个第1，第3，第7，第8和第9 {/ 1}}

.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; } } 元素。媒体查询工作正常。

我正在使用Telerik AppBuilder在Windows上调试设备，但您可以在设备上看到这一点。

以下是其中一个页面的link。它只发生在带有iosSafari 8的ios 8.02上，据我所见。我检查了浏览器堆栈，Chrome模拟器和带有Safari的旧iPad 2，但没有发生错误。

我还检查了caniuse.com，并说明.item适用于iosSafari 8。

任何想法，为什么这条规则没有正确应用？

Answer 1

再次查看caniuse。

在已知问题中＆＃39;标签，其中一个问题说：

  

iOS 8 Safari有issues with nth-child。

不管你信不信：nth-child在iOS 8上不起作用。

解决方法当然是使用nth-of-type代替 - 在iOS 8上运行

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

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