flex布局在ios8上的兼容性问题

前端 2018-10-12

今天测试的同事那种一种神奇的IPHONE 5手机,系统版本IOS8,乱成一锅粥,然后想想找找别人网站是不是也是在这上面有问题,好甩锅下,然后当场打开腾讯视频网站,只弹窗提示了个“你的系统版本过低”的话,然后页面显示很良好。

后面去网上找了找问题原来就是一个属性引起的,display:flex;
就是这个,我移动端很喜欢用这个,然后很多项目网站都加有这个。

使用到了flex布局。其他ios版本都还好,唯独在ios8上遇到了flex布局没起作用的问题。后来经过研究才发现,safari使用的是webkit内核,在ios8上需要单独加一下兼容才起作用。

display: flex;
display: -webkit-flex; 
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;
...

坑到跳时方觉深啊!