Question

我试图在用户在我的网站上注册时创建自动电子邮件。重要的是，电子邮件看起来相当不错。

我设计了一个HTML格式的电子邮件模板，以下是它的外观：

但是，在通过服务器发送电子邮件后在Outlook中查看电子邮件时，它看起来像这样：

这显然不太正确。我知道不同的电子邮件客户端都会以不同的方式处理HTML和CSS，但是这样做的正确方法是什么，以便它可以在尽可能多的不同客户端中运行？

这是我当前通过PHP Mail函数发送的代码：

<html>
<style>
    </style>
<body style='background-color: #b5b5b5; margin: 0; padding: 0;'>
    <center>
    <div style='max-width: 600px; background-color: #5a5a5a; padding: 20px; margin-top: 30px;'>
        <img style='height: 30px; margin: 20px;' src='http://favourite.es/icon/system/branding.png'>
    </div>
    <div style='max-width: 600px;
        background-color: #e8e8e8; padding: 20px; color: #222222; font-family: Roboto, sans-serif;'>
        <p style='font-size: 20px;'>Welcome to Favourite.es!</p>
        <p>Hi $newFirstname, welcome to Favourite.es,<br>your new personalised homepage for modern browsers.</p>
        <p>Thank you for registering.<br>Your account PIN is: $pin</p>
        <p>Remember to keep your PIN a secret, anyone who has your PIN can view and edit your Tiles.</p>
        <center>
        <br>
        <p style='font-size: 13px; color: #727070;'>If you have any questions, contact us at hello@favourite.es<br>You are receiving this email because you registered at favourite.es</p>
        </center>
    </div>
    <div style='max-width: 600px;
        background-color: #5a5a5a;
        padding: 20px;'>
        <img style='height: 15px;
        display: inline-block;' src='http://favourite.es/icon/system/splycdsquare.png'>
        <img style='height: 15px;
        display: inline-block;' src='http://favourite.es/icon/system/branding.png'>
    </div>
    </center>
</body>

我决定保持CSS内联，因为我认为这对于邮件客户端来说是最容易使用的。

Answer 1

如果没有可测试的东西，我只能提供一些见解。

您很可能需要删除各个div上的内联填充。如有必要，请替换为'padding：0 20px;'或'padding-left：20px; padding-right：20px;'

我已经广泛编写了电子邮件编码，可以告诉你div不容易使用。内联样式几乎总是正确的。请查看使用Zurb Ink之类的内联工具，或阅读有关如何以“old-school”表格格式设置HTML电子邮件的信息。这始终是最安全的选择。

自动电子邮件样式

1 个答案: