You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:MJML制作的邮件模板在Outlook中渲染异常问题

MJML邮件模板在Outlook中渲染异常的解决方案
  • 禁用Outlook不兼容的MJML组件:像<mj-carousel>、<mj-accordion>这类组件,Outlook的Word渲染引擎完全解析不了,直接换成<mj-section>+<mj-column>+<mj-image>的基础组合实现近似布局,别依赖复杂组件的兼容性。
  • 嵌入Outlook专属条件样式:Windows版Outlook只认老式CSS规则,在MJML文件头部加条件样式块,针对Outlook覆盖默认样式:
    <!--[if mso]>
    <style type="text/css">
      .mj-section { width: 600px !important; }
      .mj-text { font-family: Arial, sans-serif !important; }
    </style>
    <![endif]-->
    
    同时给MJML元素添加css-class属性,让条件样式能精准生效。
  • 强制图片的固定尺寸与属性:Outlook对图片的解析偏差大,给<mj-image>明确设置width、height像素值,必须加alt文本,还要加上outlook-disable-url-protection属性,防止Outlook给图片链接加安全拦截提示。
  • 放弃Flex布局依赖:MJML部分布局用到的Flex属性,Outlook完全不支持,全部改用固定宽度的列布局,通过<mj-column>的width设置精确百分比或像素值,别用flex-grow、flex-basis这类属性。
  • 用MJML的Outlook专属导出功能测试:执行mjml input.mjml --output output-outlook.html --outlook生成针对Outlook优化的HTML文件,提前在Outlook客户端测试,别用通用HTML直接验证。
  • 双重设置文本对齐规则:Outlook对text-align解析不稳定,在<mj-text>中同时设置align属性和内嵌style="text-align: center;",确保文本位置正确。

内容的提问来源于stack exchange,提问作者Junaid

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.25 21:06:29