Nodemailer中HTML邮件渲染异常问题求助

1. 核心原因：邮件客户端的Flex兼容性限制 #

主流邮件客户端（尤其是Outlook系列）对CSS Flexbox的支持极差，浏览器中正常渲染的flex布局，在邮件客户端中会直接失效，导致所有元素挤成单行。这是邮件开发的常见坑，和你的HTML代码本身无关。

2. 替换为邮件友好的表格布局 #

表格是邮件开发的标准兼容方案，修改后的代码如下：

<div style="height:auto;width:auto; background-color:#5C81F4;padding:40px 0;">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <table width="90%" style="border-radius:20px; background-color:#ffffff;overflow:hidden;" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td style="padding:20px;">
              <h1 style="text-align:center;color:#2A2836;margin:20px 0;">Quote of the Day</h1>
              <p style="font-size:30px;color:#2A2836;margin:0 10px 20px;">
                "${quote}"
              </p>
              <p style="text-align:right; font-size:20px;color:#2A2836;margin:0 10px;">- <i>${author}</i></p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

3. 确认Nodemailer配置正确 #

必须确保发送时指定html字段作为内容，而非text字段，示例配置：

transporter.sendMail({
  from: 'your-email@example.com',
  to: 'recipient@example.com',
  subject: 'Quote of the Day',
  html: 你的修改后HTML代码 // 这里传入上面的表格布局代码
});

额外注意事项 #

• 邮件样式必须全部使用内联样式，避免外部样式表或<style>标签
• 优先使用百分比或固定像素值，替代vw等浏览器端相对单位
• 可用邮件测试工具（如Mailtrap）预览不同客户端的渲染效果

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