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

Question

我正在创建一个HTML电子邮件供客户发送，以进行后续操作，并提供指向其客户可以留下有关其Realty服务的评论的地方的链接。

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

HTML使用经Gmail 白名单批准的标签，并且根据Gmail文档支持头部的样式。 在Gmail最多不超过8000个字符的情况下，样式字符数是可以接受的。

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

这是我第一次问有关堆栈溢出的问题，所以我不确定人们是否将整个代码粘贴到该问题上是否很普遍？ 我已将文档添加到此处的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