模板里的优惠券浮层在网页预览时压在图片右下角,发到 Gmail 后整块掉到正文下方,还多出一段空白。乍看像缓存或者权限的锅,追下去往往不是。
grep -n "position:\|z-index" templates/mail/*.html # 命中行逐个改成表格布局 python check_css.py templates/mail/
追下去是这么回事:Gmail 会剔除 style 标签里不支持的属性,position 和 z-index 都在黑名单里,浮层退回普通文档流。邮件客户端对定位属性的支持本来就参差,靠绝对定位做叠层这条路走不通。
「Gmail 过滤 position」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
偶发问题先统计频率,一小时几次和一天一次,查法完全不同。
具体做法是,把浮层改成表格里的独立一行,用背景图加文字代替绝对定位;确实要叠在图片上,就在图片上直接合成,别指望客户端渲染;改完在 Gmail 网页版和 App 各看一遍,两边的过滤规则还不完全一样。
验收就看一点,Gmail 里优惠券块出现在图片下方同一列,不再压住正文也不留空白。
