<img src="https://cdn.example.com/banner.png"
width="600" height="240" alt="双十一活动"
style="display:block;background:#f2f2f2;">
邮件在网页版邮箱里排版正常,Outlook 桌面端打开后图片位置只剩一条细线,下面的文字整体上移 200 像素,按钮和文案叠在一起。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。
原因不复杂,Outlook 默认不加载远程图片,图片标签只写了宽度没写高度,图片没加载时高度塌成 0,靠图片撑开的间距全部失效。表格布局跟着一起挤。
这次卡住的地方就在「邮件图片屏蔽」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。改完隔一天再看一次,当场正常不代表能稳住。
测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
处理上按这个顺序:给每张图写死宽高,再加一个同色背景的占位单元格;关键间距用单元格内边距撑,别依赖图片高度;在 Outlook 里关掉图片下载看一遍,版式不能塌。
改完只确认一件事:Outlook 不加载图片时版式仍然完整,文字和按钮位置与加载后一致。
