自动电子邮件样式

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

我在HTML设计了一个电子邮件模板，其继承人的外观：

然而，当电子邮件通过服务器发送后，在Outlook中看到的，它看起来像这样：

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

这是通过PHP的邮件功能发送我当前的代码：

<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 [email protected]<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内联，因为我认为这将是最简单的邮件客户端来使用。

来源

2015-10-12 Splycd

没有什么可以测试的，我只能提供一些见解。

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

我已经编码了广泛的电子邮件，可以告诉你divs不容易处理。内联样式几乎总是正确的。看看如何使用内联工具，如Zurb Ink或阅读关于如何设置您的HTML电子邮件在'老学校'表格式。这总是最安全的选择。

来源

2015-10-12 20:52:54

谢谢！使用Zurb Ink确实有助于:) – Splycd

自动电子邮件样式

回答

相关问题