我正在使用带有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-child
iosSafari 8 的作品.
任何想法,为什么这条规则没有正确应用?
再看看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; }