h5最新开发项目使用CSS新特性flex布局，遇到CSS兼容问题。在网上找到了以下解决方案。我在写页面的时候用过很多flex布局，觉得很好用。下面附上一篇很好的flex布局介绍。如果想了解更多关于flex布局的教程，可以自行阅读这篇博文，也可以自行百度。在这里，我们先多介绍一下。下面主要说一下flex布局的兼容性。为什么？你可能想问，为什么flex布局会有兼容性问题？之所以会出现兼容性问题，是因为技术在不断更新，一些旧的浏览器只支持旧的语法写法，所以才会出现所谓的兼容性问题。什么？那么什么是新旧版本呢？flex布局分为旧版display:box;、过渡版display:flexbox;、当前标准版display:flex;。所以如果你只是写一个新版本的语法形式，肯定会有兼容性问题。Android2.3开始支持老版本display:-webkit-box；4.4开始支持标准版显示：flex；iOS6.1开始支持老版本display:-webkit-box；7.1开始支持标准版显示：flex；PCie10开始支持，但是IE10是-ms的形式。下面是各个浏览器的支持情况如何？那么兼容性怎么写呢？Boxcompatibility.box{显示：-webkit-box;/*旧版本语法：Safari、iOS、Android浏览器、旧版WebKit浏览器。*/显示：-moz-box；/*旧版本语法：Firefox(buggy)*/display:-ms-flexbox;/*混合语法：IE10*/显示：-webkit-flex；/*新语法：Chrome21+*/显示：flex；/*新语法：Opera12.1,Firefox22+*/}子元素的兼容性写法.flex1{-webkit-box-flex:1/*OLD-iOS6-,Safari3.1-6*/-moz-box-flex:1;/*OLD-Firefox19-*/-webkit-flex:1;/*Chrome*/-ms-flex:1/*IE10*/flex:1;/*NEW,Spec-Opera12.1,Firefox20+*/}这种兼容的写法不一定有效。特别是在Android的基础版本中。为什么？因为一切都是向后兼容的，所以写的顺序一定要写好才能工作。就是把旧语法写在最下面，这样个别不兼容的手机设置就会被识别出来，哪些是旧语法，你懂的。有方框的必须写在最下面。所以上面兼容的写法应该是这样的：.box{display:-webkit-flex;/*新版本语法：Chrome21+*/display:flex;/*新版本语法：Opera12.1,Firefox22+*/display:-webkit-box;/*旧语法：Safari、iOS、Android浏览器、旧的WebKit浏览器。*/显示：-moz-box；/*旧语法：Firefox（错误）*/显示：-ms-flexbox；/*混合版本语法：IE10*/}.flex1{-webkit-flex:1;/*Chrome*/-ms-flex:1/*IE10*/flex:1;/*NEW,Spec-Opera12.1,Firefox20+*/-webkit-box-flex:1/*OLD-iOS6-,Safari3.1-6*/-moz-box-flex:1;/*OLD-Firefox19-*/}综上所述，我们这样试试，保证不会出现返工修改问题。祝你好运！说到底，我不是大师，也不是伟人。写这个账号的目的是记录下我自学webfullstack的笔记。有兴趣的朋友可以扫描下方二维码公众号——爱写bug的阿拉斯加，分享web开发相关技术文章、热点资源、全栈程序员的成长之路，与大家交流成长。只要关注公众号并回复福利，即可获得每套价值3999元的六套视频资源：Python、Java、Linux、Go、vue、react、javaScript
