Мой шаблон электронной почты показывает HTML в его выдержке на Gmail - PullRequest
Новая
       17

Мой шаблон электронной почты показывает HTML в его выдержке на Gmail

0 голосов
/ 15 мая 2019

Я никогда не видел этого раньше, но мой шаблон электронной почты, когда отображается в Gmail (якобы и другие клиенты тоже?), Содержит выдержку HTML, например:

Джон Смит прислал вамmessage width = "155" height = "55" title = "Welcome" 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://foo.com">
                                 <img src="https://app.foo.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://foo.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://foo.com">Foo</a>.
        </p>
    </td>
</tr>
</tbody>
</table>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 16 мая 2019

Странно, я не могу реплицировать в Gmail или Outlook 2013 на рабочем столе.

Я заметил пару вещей, которые вы можете попробовать:

  1. Нет Doctype был включен. Может быть, попробуйте добавить это в?
  2. Я нашел не закрытый стол. Где комментарий '', выше или ниже, который должен быть заключительным табличный тег.


Не знаю, поможет ли это, но лучше всего попробовать Doctype и снова протестировать свой конец.

0 голосов
/ 15 мая 2019

Очевидно, вы пропустили тег <img перед вашей выдержкой.Потому что эта часть: width="155" height="55" title="Welcome" style="display: inline; float: none;" используется для стилизации изображения.

...