自動電子郵件樣式
[英]Automated E-Mail styling
問題描述
我試圖在用戶在我的網站上注冊時創建自動電子郵件。 電子郵件看起來相當漂亮很重要。
我設計了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內聯，因為我認為這對於郵件客戶端來說是最容易利用的。
1 個解決方案
解決方案1
1 已采納 2015-10-12 20:52:54
沒有可以測試的東西，我只能提供一些見解。
您很可能需要刪除各個div上的行內填充。 如有必要，請替換為“ padding：0 20px;” 或'padding-left：20px; padding-right：20px;'
我已經為電子郵件進行了廣泛的編碼，可以告訴您div並不容易使用。 內聯樣式幾乎總是正確的。 考慮使用Zurb Ink之類的內聯工具，或閱讀有關如何以“老式”表格格式設置HTML電子郵件的信息。 這始終是最安全的選擇。
樣式化HTML電子郵件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.