本文探讨了创建具有良好兼容性的邮件模板所面临的挑战，包括内联样式、表格布局、图片处理和兼容性测试。建议使用15年前的网页开发方式来确保广泛兼容，特别是针对Outlook等邮件客户端。在实践中，遇到的问题包括样式处理、图片显示和内容转码，需要采取特定策略以适应不同的邮件客户端。文章还推荐了一些测试工具和方法，以提高模板的开发效率。
本文作者：IMWeb moonye
未经同意，禁止转载
怎样书写一个邮件模版
背景
很多时候我们会收到一些银行或者酒店推送的广告，打开广告，可以看到一个html页面
本来以为是写一个静态页面可以实现出来的。后面刚好项目中用到，感觉就不是一回事了。
开始
看过几篇文章，谈到如何写一个邮件模版。其中有一句话比较认同
如果想要你的邮件模版有好的兼容性，那么用15年前开发网页的方式来开发html页面，准没错
当然也有一些邮件客户端，如firefox，qq邮箱，163邮箱比较好的支持了html和css样式
如果只考虑这些兼容性比较好的客户端，那么你可以在谷歌浏览器测试通过后即发送模板，然后你就可以下班了
但愿你可以这么好运。
而实际上，由于邮件客户端实现标准不一，很多时候需要兼容其他客户端场景
于是实现出来的方案是折中或者说是一个降级的方案。
在实现过程中碰到一些问题，总结出来。
兼容性问题
样式使用内联，outlook中会去掉模板头中style中的样式
布局使用table，因为outlook中会将div转换为内联样式
比如要实现一块内容居中的效果，需要外层套一个宽度100%的table，里面放一个固定宽度的table，居中展示
|
优先使用标签的属性功能，其次使用style样式来控制
尽量使用padding来控制边距，padding尽量使用分开写的方式(padding-top:2px;)，否则某些客户端可能无效，margin并不是总有效
邮件中不能隐藏了内容，所以有多余的内容时，需要在填入邮件前处理掉
比如显示一行文本，如果文本过多，导致的结果就是换行，可能会影响到整理的页面布局
转码问题
内容填充到邮件，不需要做html编码。因为邮件模版程序在生成内容时为防止xss会做一次转码。
特殊场景
特殊的图片展示问题
图片的协议链接需要补充完整，如带上http或者https
安平切图的图片在outlook2007上展示异常，要兼容outlook2007需要直接使用原图
文档或工具
可以使用一些辅助的工具帮助我们更快更有效的开发邮件模版
邮箱功能：outlook中自带查看源文件功能，可以看到经过outlook解析后的模版内容
本地浏览器测试：使用chrome，IE8来测试兼容性
本地客户端测试：使用notepad++，自带插件，可以调用本地outlook客户端发送模版(菜单路径：run -> send via Outlook)
参考
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
