:n-child没有在iosSafari工作8

 U友47919166 发布于 2022-12-09 17:32

我正在使用带有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 的作品.

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

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;
    }
    

    2022-12-11 02:10 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有