Office 365/Exchange Online 配置HTML邮件免责声明不生效问题咨询

核心问题点 #

• flex布局不被邮件客户端支持：包括Outlook在内的绝大多数邮件客户端（Outlook使用Word作为HTML渲染引擎）完全不支持display:flex相关属性，你写的justify-content: center等flex排版逻辑全部失效，导致图片和文字无法实现预期的并排居中效果，会直接换行展示。
• webkit专属属性无兼容：-webkit-text-stroke-width、-webkit-text-stroke-color这类webkit内核专属属性，仅在部分苹果生态的邮件客户端可用，其他绝大多数客户端完全不识别，搭配的color: transparent属性也会失效，镂空文字效果无法实现。
• 相对单位与字体兼容性差：你使用的em相对单位在不同邮件客户端的默认字号基准不同，会导致排版错乱；Roboto属于非系统预装字体，邮件客户端无法加载外部字体，最终会 fallback 到系统默认字体，和预期效果不符。
• Font Awesome图标无法加载：<i class="fas fa-exclamation-triangle"></i>依赖外部引入的Font Awesome样式文件，邮件客户端不会加载任何外部样式资源，所以这个警告图标完全不会显示，仅为空标签。
• 图片配置不符合邮件规范：你给图片设置的width: 2%百分比宽度在很多客户端会被忽略，同时多数邮件客户端默认禁用外部图片，就会出现你看到的[图片链接]占位符效果。
• rgba颜色与语义色支持度低：rgba半透明颜色、darkred这类语义色在Outlook等客户端中不被支持，会直接被替换为默认文本颜色。

优化调整建议 #

• 排版全部改用<table>标签实现：邮件HTML的通用兼容方案就是用表格布局，所有对齐、并排效果都通过表格单元格属性或者内联样式实现，不要使用div+CSS3的布局方式。
• 替换特殊效果实现方式：镂空文字这类依赖特殊CSS的效果，直接导出为对应效果的小图片插入即可，不要用CSS实现。
• 统一使用绝对单位和通用字体：所有尺寸单位用px，不要用em、rem、百分比这类相对单位；字体指定系统预装的通用字体，比如微软雅黑、Arial等。
• 替换外部依赖的图标：不要用Font Awesome这类需要外部样式的图标，警告类标识可以直接用⚠️emoji，或者把图标转成png后嵌入。
• 优化图片加载逻辑：所有小图标优先转成base64内嵌到HTML中，避免外部图片被拦截；同时给所有图片设置固定的宽高px值。
• 统一使用十六进制色值：所有颜色用十六进制色值表示，比如用#B1BAC4替代rgba(177,186,196,1)，用#00A9AA替代rgba(0,169,170,1)，用#8B0000替代darkred。
• 所有样式全部写在内联style属性中：不要使用class、id绑定外部样式，也不要写<style>标签，绝大多数邮件客户端会直接删除页面中的style标签。

内容的提问来源于stack exchange，提问作者cypexx