我目前正在重新设计一些 HTML 电子邮件模板，这是我几年来没有做过如此深入的事情。
我已经在 HTML 文件中制作了模板，我正在浏览器中本地测试该模板，一切看起来都很好。
- 我使用表格进行布局
- 我使用的唯一其他标签是
<p> <a> and <img>
- CSS 位于
<style>打开后的标签<body>现在标记，但我在发送之前将其转换为内联样式，使用MailChimp CSS 内联工具 http://beaker.mailchimp.com/inline-css。我只是将它放在样式标签中，以便您在这里更容易地查看 CSS。无论如何，出于测试目的，这对许多客户端来说没有什么区别。
现在我正在从我的 PHP 应用程序发送测试电子邮件，我试图让它们发送到电子邮件客户端，看起来与我的模型相同。
我注意到的主要事情是，边距/填充样式似乎要么被忽略（例如 Outlook 2007），要么在诸如此类的内容上添加了额外的填充/边距<td>这使得一切都比我所说的更加丰富（例如 Hotmail）。
示例来源
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<body>
<style type="text/css">
td {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444;}
a {color:#056DA5;}
p {margin:0; padding:6px 0 6px 0;}
.tel {font-weight:bold; color:#056DA5;}
#wrapper {padding:10px;}
#signoff {padding:18px 0;}
#signoff #questions {padding-bottom:18px;}
#signature {padding-top:20px; border-top:1px solid #EEE;}
#signature td {font-size:12px; color:#777;}
#signature #logo {padding-bottom:12px;}
#signature #contact p {padding:3px 0 3px 0;}
#signature #contact a {text-decoration:none; font-size:13px; font-weight:bold; color:#C00;}
#signature #contact .tel {padding-top:6px; color:#777;}
#signature #social {padding:20px 0 20px 0;}
#signature #social a {margin-right:8px;}
#signature #address {font-size:11px; color:#999;}
</style>
<table id="wrapper" width="100%" bgcolor="#FFFFFF">
<tr>
<td>
<table>
<!-- ROW 1 -->
<tr>
<td>[CONTENT]</td>
</tr>
<!-- ROW 2 -->
<tr>
<td id="signoff">
<p id="questions">If you have any questions, email us at <a href="mailto:[email protected] /cdn-cgi/l/email-protection">[email protected] /cdn-cgi/l/email-protection</a> or call <span class="tel">01234567890</span>.</p>
<p>Thanks,</p>
<p>Company</p>
</td>
</tr>
<!-- ROW 3 -->
<tr>
<td id="signature">
<table cellpadding="0" cellspacing="0">
<tr>
<td id="logo" colspan="3">
<img src="http://www.example.com/images/email/logo.gif" alt="Company" />
</td>
</tr>
<tr>
<td id="contact">
<p><a href="http://www.example.com">www.example.com</a></p>
<p><a href="mailto:[email protected] /cdn-cgi/l/email-protection">[email protected] /cdn-cgi/l/email-protection</a></p>
<p class="tel">01234567890</p>
</td>
</tr>
<tr>
<td id="social">
<a href="https://www.facebook.com/"><img src="http://www.example.com/images/email/facebook.gif" alt="Facebook" /></a>
<a href="https://twitter.com/"><img src="http://www.example.com/images/email/twitter.gif" alt="Twitter" /></a>
</td>
</tr>
<tr>
<td id="address">Company, address, city, post code</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
尝试在浏览器中查看 HTML，然后尝试通过电子邮件发送以了解我的意思。
我做错了什么以及如何使电子邮件通过预期的 CSS 发送？
尽可能使用内联 CSS 样式（不是<style>页面上的标签，但是style=""属性）。使用 HTML 属性 (bgcolor, width, height等）尽可能代替 CSS 样式，因为有更广泛和更一致的支持。在每个元素上单独定义样式 - 不要依赖继承或级联。
我的意思是通过每个单独的属性或内联样式手动设置宽度、高度、填充、边距等td and tr, etc.
不幸的是，您永远无法实现任何与完全一致性相类似的东西 - 通常我的目标是它在 Gmail、Mac Mail 和 Outlook 中看起来不错，而这就是您真正能做到的最好的事情。 HTML 电子邮件在 CSS 支持方面仍然落后十年，并且不同邮件客户端使用的 HTML 渲染引擎之间存在巨大差异，这意味着开发向后兼容 IE6 的现代网站实际上比编写一封精心设计的优秀电子邮件要简单得多。模板。
我总是向人们推荐Campaign Monitor 出色的电子邮件客户端 CSS 兼容性图表 http://www.campaignmonitor.com/css/当被问到这个问题时。他们也有很棒的HTML 电子邮件编码指南 http://www.campaignmonitor.com/guides/coding/guidelines/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
