HTML Gmail 中的模板呈现不正确

Question

我正在使用 Mailgun 从模板发送邮件。但在 Gmail 上呈现不正确。

我没有使用任何样式标签或任何复杂的标签 css。

ps：我不确定我应该添加多少文本才能被接受。

这是html模板

模板：

<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Communication</title>
</head>
<body style="margin:0;padding:0;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" valign="top" bgcolor="#fff" style="background-color:#fff;">
                <table width="600" border="0" cellspacing="0" cellpadding="0" style="border: solid 1px #000;margin-top:60px;">
                    <tr>
                        <td align="left" valign="top" bgcolor="#001529" style="background-color:#001529; font-family:Arial, Helvetica, sans-serif; padding:10px;">
                            <div style="font-size:36px; color:#fff;">
                                <b>FORGOT YOUR PASSWORD?</b>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" valign="top" bgcolor="#fff" style="background-color:#fff;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="left" valign="middle" style="color:#525252; font-family:Arial, Helvetica, sans-serif; padding:10px;">
                                        <div style="font-size:16px;">
                                            Dear {0},
                                        </div>
                                        <div style="font-size:16px;">
                                            <p>A request has been received to reset your password for your -- account. Please click the button below to reset your password.</p>
                                            <center>
                                                <button type="button" title="Confirm Account Registration" style="background: #00415a;border:1px solid #00415a;">
                                                    <a href="{1}" style="font-size:22px; padding: 6px 12px; color: #f2faff;text-decoration:none;display:inline-block">
                                                        Reset Password Now
                                                    </a>
                                                </button>

                                            </center>
                                            <p style="font-size:16px;">If you did not make this request please igonore this email.</p>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="left" valign="middle" style="padding:15px; background-color:#00415a; font-family:Arial, Helvetica,sans-serif;font-size:12px; color:#f2faff;">
                                        <p>Regards<br/>
                                        -- © {2}</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

这是它在 Gmail 中的呈现方式：

Gmail:

Answer 1

给标题和按钮文本一个 line-height，应该修复它。

另外，我建议不要使用 margin-top 或 emails/tables 中的底部，而是始终使用填充。出于某种原因更兼容。例如，如果您需要上面的一些 space，请在元素上方创建一个空的 div 并给它一个高度。

Answer 2

缩小模板似乎可以解决问题。

请记住，这不是 Gmail 问题，而是 Mailgun 问题。

HTML Gmail 中的模板呈现不正确

HTML Template in Gmail Renders Incorrect

html

css

email

gmail