卡片列表在新浏览器间距正常,旧版安卓上全部贴在一起。乍看像缓存或者权限的锅,追下去往往不是。
.list { display: flex; flex-wrap: wrap; margin: -6px; }
.list .card { margin: 6px; }
追下去是这么回事:旧内核不支持弹性布局的间距属性,声明被直接忽略。
「flex gap 兼容」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
具体做法是,改用外边距实现间距;用选择器去掉多余边距;保留新属性作为增强。
验收就看一点,新旧浏览器中间距表现一致。