:n-child没有在iosSafari工作8

Question

我正在使用带有ios 8.02和iosSafari 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上调试设备,但您可以在设备上看到它.

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

我还检查了caniuse.com,它说:nth-childiosSafari 8 的作品.

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

Answer 1

再看看caniuse.

在"已知问题"标签中,其中一个问题是:

iOS 8 Safari 与n-child存在问题.

所以信不信由你:nth-child在iOS 8上不起作用.

解决办法当然是使用nth-of-type代替-这不 iOS上的8个工作

所以(假设.item元素是a li)你的代码变成了

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