:nth-child没有在iosSafari 8上工作

I'm using a iPad with ios 8.02 and iosSafari 8.

我使用的是ios 8.02和iosSafari 8的iPad。

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

I checked in the browser inspector and above style rule is being applied by iosSafari to every 1st, 3rd, 7th, 8th and 9th .item

我检查了浏览器检查器，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;
   }
}

And that style rule is being applied to every .item element. The media query is working properly.

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

I'm using Telerik AppBuilder to debug the device on Windows, but it you can see this on the device itself.

我正在使用Telerik AppBuilder来调试Windows上的设备，但是你可以在设备本身看到这一点。

Here is a link to one of the pages it is occurring. It only occurs on ios 8.02 with iosSafari 8 as far as I can see. I checked on browser stack, the chrome emulator and an older iPad 2 with Safari and the error did not occur.

这里是它正在发生的一个页面的链接。据我所知，它只出现在iosSafari 8的ios 8.02上。我查看了浏览器栈、chrome模拟器和带有Safari浏览器的旧ipad2，没有出现错误。

I also checked caniuse.com and it says that the :nth-child works on iosSafari 8.

我还查看了caniuse.com，上面说:nth-child在iosSafari 8上工作。

Any idea, why this rule is not being applied correctly?

知道为什么这个规则没有被正确地应用吗?

1 个解决方案

#1

Look at caniuse again.

再来看看caniuse。

In the 'known issues' tab, one of the issues says:

在“已知问题”选项卡中，有一个问题是:

iOS 8 Safari has issues with nth-child.

ios8 Safari存在nth-child问题。

So believe it or not: nth-child doesn't work on iOS 8.

The workaround is of course to use nth-of-type instead - which does work on iOS 8

解决方案当然是使用n -of-type而不是iOS 8

So (assuming the .item element is a li) your code becomes

因此(假设.item元素是li)您的代码就变成了

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