Question

我正在为客户创建HTML电子邮件，以发送跟进通知，并提供指向客户可以为其房地产服务留下评论的地方的链接。

我在格式化方面遇到问题。我使用的是Chrome插件HTML Inserter for Gmail，将代码粘贴到电子邮件中后，在撰写的邮件中看起来正确。但是，当我向自己发送测试电子邮件时，其格式不正确。

HTML使用经Gmail Whitelist批准的标签，并且根据Gmail docs支持头部的样式。 Gmail的字符数最多不超过8000个字符。

在这里进行了一些研究之后，我的代码找不到任何错误。

这是我第一次问有关堆栈溢出的问题，所以我不确定人们是否将整个代码粘贴到该问题上是否很普遍？我已将文档添加到here找到的Repl.it中。

很抱歉，如果这是一个简单的解决方法-我无法在线找到任何帮助。谢谢！

Answer 1

马修，

我调查了gmail的HTML插入器，看来在上次更新插件后，这是人们遇到的一个普遍问题。可能是插件而不是您的代码吗？

Answer 2

我不知道这个Google白名单，也不知道有关它的google文档，但是我意识到有多个HTML电子邮件，而gmail只是其中的一个客户。通常来说比其他类似的Outlook宽松（我认为这是最糟糕的）。如果目的是让您的客户将其发送给他的客户，则必须考虑到有多个具有多个渲染马达的客户，因为也许他的一位客户会使用Outlook或Thunderbird打开它。

悲伤的部分到了... 如果您想在不同的邮件客户端上获得全面的支持，就像回到旧网络一样。通常是这样的一个例子，例如我发送给我以获得实习机会的旧邮件：

<table style="border-collapse:collapse;width:500px;margin:0 auto">

    <tbody>
        <tr>

            <td>
                <img src="https://ci5.googleusercontent.com/proxy/rZJ68vGa_16qkkvRQ7gpG698xHm2qHxDGps3vTpHjqeN8hHjI6J9pqXpARCuzjb3XYsnCviGiLUBV8RQhvAxO2ZIdIPhrA=s0-d-e1-ft#http://boursbenjamin.be/_imgmail/superstrong.png"
                    alt="header" width="500" height="300" style="display:block" class="CToWUd">
            </td>

        </tr>

        <tr style="font-family:roboto,sans-serif;font-size:16px;line-height:20px">

            <td style="padding:40px 30px 40px 30px;background:#ffffff">
                <table style="width:100%">
                    <tbody>
                        <tr>
                            <td>
                                Je suis
                                <b style="color:#00bbfd">Benjamin Bours</b>,
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:40px 0px 40px 0px">
                                je proviens de Liège et
                                <b style="color:#00bbfd">j'étudie à l'HEAJ de Namur</b> ou j'apprends le
                                <b style="color:#00bbfd">webdesign</b> et le
                                <b style="color:#00bbfd">front end development.</b>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:0px 0px 40px 0px">
                                Dans le cadre de ma dernière année, je dois réaliser un
                                <b style="color:#00bbfd">stage de 3 mois</b> (du 7 Novembre au 27 Janvier).
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:0px 0px 40px 0px">
                                J'aimerais vraiment
                                <b style="color:#00bbfd">améliorer</b> mes compétences de développement et
                                <b style="color:#00bbfd">travailler</b> sur des
                                <b style="color:#00bbfd">projets avec vous</b>, et c'est pourquoi je pense que vous,
                                <b>
                                    <span class="il">SUPERSTRONG</span>
                                </b>, êtes
                                <b style="color:#00bbfd">l'agence parfaite pour moi.</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Si vous désirez en savoir plus sur moi, je vous invite à
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:80px 0px 80px 0px">
                                <div style="width:200px;height:100px;border:solid #00bbfd 3px;margin:0 auto">
                                    <a href="http://boursbenjamin.be" style="display:block;text-align:center;text-decoration:none;color:#00bbfd;box-sizing:border-box;margin:0 auto;width:200px;line-height:100px;font-weight:600"
                                        target="_blank" data-saferedirecturl="https://www.google.com/url?q=http://boursbenjamin.be&amp;source=gmail&amp;ust=1534023364151000&amp;usg=AFQjCNEltkO1A2HaWdPFPTkNbFw3PhHfrQ">Visiter mon site</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding:0px 0px 40px 0px">
                                Dans l'attente de votre réponse.
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Je vous prie de bien vouloir agréer, mes sincères salutations, Benjamin Bours.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>

        </tr>

    </tbody>
</table>

这里，有一些有趣的链接

https://litmus.com/help/email-clients/rendering-engines/

https://caniuse.email/

https://www.nurturehq.com/tips/why-html-email-can-be-a-pain

https://medium.com/connect-the-dots/10-steps-for-effective-cross-client-browser-html-emails-e69a78da1b13

使用GMail发送HTML电子邮件时遇到问题

2 个答案: