display:flex在IOS10及以下设备下布局混乱

瘦肉蛋 2020-06-23 11:59:13

具体复现 DEMO
实在是不知道怎么办了，老版本语句兼容也试过了，求大神瞧瞧。

...全文

350 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

此demo展示了布局的展开与收起，能够为布局省下很多空间。

动态隐藏和显示工具栏动态隐藏和显示工具栏动态隐藏和显示工具栏

在小程序页面中父元素使用display:flex时，子元素使用position:absolute后。在苹果6s/6P/6sP的系统下会出现兼容问题，子元素position:absolute不生效页面出现布局混乱。所以当子元素要用position:absolute，父元素不能使用 display: flex布局。否则会出现兼容问题（开发工具测不出问题，真机会在6s/6P/6sP才能测出问题） ...

Safari浏览器display: flex布局错乱，Chrome布局正确 display: flex; align-items: center; justify-content: end; chrome显示结果 Safari显示结果这个时候只需要把justify-content: end替换成 justify-content: flex-end就可以了所以在开发当中，不管是justify-content还是align-items时都因该将start替换为flex-start ,end 替换为fl

众所周知，ios系统老是和我们前端过不去，搞一堆不兼容问题，比如flex布局！

61,126

社区成员

60,707

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章