求助:MJML制作的邮件模板在Outlook中渲染异常问题
MJML邮件模板在Outlook中渲染异常的解决方案
- 禁用Outlook不兼容的MJML组件:像
<mj-carousel>、<mj-accordion>这类组件,Outlook的Word渲染引擎完全解析不了,直接换成<mj-section>+<mj-column>+<mj-image>的基础组合实现近似布局,别依赖复杂组件的兼容性。 - 嵌入Outlook专属条件样式:Windows版Outlook只认老式CSS规则,在MJML文件头部加条件样式块,针对Outlook覆盖默认样式:
同时给MJML元素添加<!--[if mso]> <style type="text/css"> .mj-section { width: 600px !important; } .mj-text { font-family: Arial, sans-serif !important; } </style> <![endif]-->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
相关产品推荐
相关产品推荐

