前端新手求助：自动生成HTML邮件模板渲染异常问题

问题背景 #

• 开发的HTML模板在Live Server中渲染正常，但通过Postman触发自动发送邮件时出现布局变形
• 已采用inline CSS适配Gmail（Gmail不支持外部CSS）
• 猜测问题是邮件客户端将body作为容器导致外层div被挤压

核心原因 #

邮件客户端（如Gmail、Outlook等）对现代CSS布局（Flex/Grid）支持有限，部分属性会被忽略或解析异常；同时相对路径的图片无法在邮件中加载，一些无效CSS属性也会导致布局错乱。

修复方案 #

1. 改用表格布局（邮件最兼容方案） #

邮件客户端普遍对表格布局支持最好，替换Flex/Grid为表格结构，确保在所有客户端中渲染一致。

2. 修正图片路径 #

将相对路径./crackle.png替换为绝对URL，确保邮件能正确加载图片。

3. 清理无效CSS属性 #

• 移除white-space: wrap（不存在该属性，改用white-space: normal）
• 替换padding: none为padding: 0
• 移除body的flex布局，改用块级布局并设置最大宽度限制

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>message_generation</title>
    <!-- 邮件客户端大多不支持外部字体链接，可内嵌字体或使用系统安全字体 -->
    <style>
        /* 仅用于基础兼容，主要样式仍用inline */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', Arial, sans-serif;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
    </style>
</head>
<body style="font-size: 15px; background-color: #ffffff; font-family: 'Montserrat', Arial, sans-serif; padding: 1%; margin: 0; max-width: 600px; margin: 0 auto;">
    <table style="background-color: #ffeeee; width: 100%; padding: 20px;">
        <tr>
            <td align="center">
                <a href="https://crackle.tech/" target="_blank">
                    <img src="https://your-domain.com/crackle.png" alt="Crackle Logo" style="height: auto; width: 150px; margin-bottom: 20px; margin-top: 8px;" />
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <table style="background-color: white; border: 1px solid black; width: 100%; padding: 20px;">
                    <tr>
                        <td style="font-size: 12px;">
                            Dear ${1}, <br />
                            Your bank account details <br />
                            have been updated to <br />
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 15px 0;">
                            <table style="background-color: #e3e4e5; width: 100%; padding: 13px 0;">
                                <tr style="font-size: 13px;">
                                    <td style="padding-left: 20px; white-space: nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Bank Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </td>
                                    <td style="font-weight: 600;">${2}</td>
                                </tr>
                                <tr style="font-size: 13px;">
                                    <td style="padding-left: 20px; white-space: nowrap; padding-top: 8px;">&nbsp;&nbsp;&nbsp;&nbsp;Acc. No&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </td>
                                    <td style="font-weight: 600; padding-top: 8px;">${3}</td>
                                </tr>
                                <tr style="font-size: 13px;">
                                    <td style="padding-left: 20px; white-space: nowrap; padding-top: 8px;">&nbsp;&nbsp;&nbsp;&nbsp;IFSC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </td>
                                    <td style="font-weight: 600; padding-top: 8px;">${4}</td>
                                </tr>
                                <tr style="font-size: 13px;">
                                    <td style="padding-left: 20px; white-space: nowrap; padding-top: 8px;">&nbsp;&nbsp;&nbsp;&nbsp;Beneficiary Name&nbsp;: </td>
                                    <td style="font-weight: 600; padding-top: 8px; word-wrap: break-word; width: 80%;">${5}</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px; padding-top: 15px;">
                            If the account update was not initiated by <br />
                            you, please reach out at
                            <a href="mailto:support@crackle.tech" style="padding-left: 3px; padding-right: 5px;">support@crackle.tech</a>
                            <br />
                            <br />
                            Thank you, <br />
                            Crackle Team
                            <br />
                            <i style="font-size: 10px">This is a computer generated mail, please do not reply.</i>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; font-size: 10px; padding-top: 20px;">
                You have received this mandatory service notification email <br />
                because it contains important information about your Crackle account. <br />
                Crackle Technologies, 9 Raffles Place, #29-05, Republic Plaza, Singapore 048619
            </td>
        </tr>
    </table>
</body>
</html>

额外注意事项 #

• 邮件中尽量避免使用复杂CSS选择器和现代布局属性，优先用inline样式和表格
• 字体优先选择系统安全字体，外部字体在多数邮件客户端中无法加载
• 测试时尽量覆盖主流邮件客户端（Gmail、Outlook、Apple Mail等）

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