我的电子邮件模板在 Gmail 上的摘录中显示 HTML

问题描述 投票:0回答:2

我以前从未见过这个。我的电子邮件模板在 Gmail(表面上也是其他客户端?)中显示时,其摘录中包含 HTML,例如:

John Smith 给您发了一条消息 width="155" height="55" title="欢迎" style="display: inline; float: none;"...

我在电子邮件主题中使用了粗体,斜体是摘录。

我做错了什么?整个模板如下 - 我刚刚添加了一些标题等的虚拟副本,因为它是由 PHP 生成的。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>
    Test title
</title>
</head>
<body style="width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #ffffff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;">
<table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #ffffff; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; background: #f1f1f1; margin: 0; padding: 0;" bgcolor="#ffffff">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
    <td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 30px 0px;">
         <center style="width: 100%; min-width: 580px;">
        <table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; background: transparent; padding: 0px;" bgcolor="transparent">
        <tbody>
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
            <td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" valign="top">
                 <center style="width: 100%; min-width: 580px;">
                <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; background: transparent; margin: 0 auto; padding: 0;" bgcolor="white">
                <tbody>
                <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                    <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 35px border-style: solid; border-width: 1px 1px 0;" align="left" valign="top">
                        <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 500px; margin: 0 auto; padding: 0;">
                        <tbody>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td class="six sub-columns last" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 50%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 20px 0px 35px; text-align: center;" align="right" valign="middle">
                                <a href="https://example.com">
                                 <img src="https://app.example.com/images/logo.png" alt="Foo" width="155" height="55" title="Foo" style="width: 155px; height: 55px; display: inline; float: none; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; clear: both; opacity: 1" align="none">
                                </a>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
                </table>
                </center>
            </td>
        </tr>
        </tbody>
        </table>
        <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;">
        <tbody>
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
            <td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 50px; background: #ffffff;" align="left" valign="top" bgcolor="#ffffff">
                <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
                <tbody>
                <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                    <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 50px 0px;" align="left" valign="top">
                        <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 500px; margin: 0 auto; padding: 0;">
                        <tbody>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 0px 0px 20px; border-collapse: collapse !important;" align="left" valign="top">
                                <p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; font-weight: 300; margin: 0px 0px 10px; padding: 0px;" align="center">
                                    Lorem ipsum dolor sit amet
                                </p>
                            </td>
                        </tr>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 40px 0px 35px; border-collapse: collapse !important; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;" align="left" valign="top">
                                <p style="text-align: center; color: black; font-family: Helvetica, Arial, sans-serif; font-size: 25px; line-height: 1.5; font-weight: 300; margin: 0px; padding: 0px;" align="center">
                                    Test title
                                </p>
                                <p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: 300; margin: 0px; padding: 0px; padding-top: 15px;" align="center">
                                    Test subtitle
                                </p>
                            </td>
                        </tr>
                        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
                            <td style="word-break: break-word; vertical-align: top; text-align: left; margin: 0px; padding: 30px 0px 0px; border-collapse: collapse !important; text-align: center;" align="center" valign="top">
                                <table border="0" cellspacing="0" cellpadding="0" align="center">
                                    <tr>
                                        <td align="center" style="border-radius: 3px;" bgcolor="#17c68c">
                                            <a href="https://example.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; padding: 15px 40px; border-bottom: 3px solid #149369; display: inline-block; font-weight: 300;">
                                                Test label
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
                <!-- container end below -->
            </td>
        </tr>
        </tbody>
        </table>
        </center>
    </td>
</tr>
<tr>
    <td style="padding-top: 20px;">
        <p style="text-align: center; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: 300; margin: 0px 0px 10px; padding: 0px; padding-bottom: 45px;" align="center">
            From your friends at <a style="color: #17c68c;" href="https://example.com">Foo</a>.
        </p>
    </td>
</tr>
</tbody>
</table>
</body>
</html>

html email html-email
2个回答
1
投票

奇怪,我无法在 Gmail 或桌面版 Outlook 2013 中进行复制。

我确实注意到了一些你可以尝试的事情:

  1. 不包含任何文档类型。也许尝试添加它?
  2. 我发现了一张未关闭的桌子。注释 '' 所在的位置,无论是在上面还是在下面,都需要作为结束语 表格标签。


不知道其中任何一个是否会有帮助,但最好至少尝试一下 Doctype,然后再次测试。


0
投票

显然,您错过了摘录之前的

<img
标签。因为这部分:
width="155" height="55" title="Welcome" style="display: inline; float: none;"
是用于图像样式的。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.