如何编写兼容各主流邮箱的HTML邮件
Published by 大米
几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面，是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的，能正常显示的HTML邮件。
首先，我们先来看看邮箱是如何展现HTML邮件的。我本人没有做过邮件系统，况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的。所以，我们只能通过前端展现，来推测哪些是被邮箱接受的写法，而哪些又是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina几个邮箱的分析，我把邮箱分为两类：
第一类包括gmail、hotmail、sohu，这类邮箱，邮件内容是被布局在整个邮箱页面中的某个div中。如图：
第二类，包括163、sina，这类邮箱，邮件内容被布局在独立的iframe中。如图：
熟悉HTML的朋友都知道，iframe内容是作为独立的document，与父页面的元素和CSS是互不相干的，几乎可以作为一个独立的页面来对待。而如果如果邮件内容是在div中，那么邮件内容是作为整个邮箱页面的一个组成部分。显然，以iframe作为展现方式的邮箱，对邮件内容就会宽容许多，因为它给了你一个足够独立的表现空间。而div就不是那么客气了。试想一下，如果你在你的邮件里写上这么一句CSS，是不是整个邮箱的展现页面上字体都变成20px而因此乱了套：
<style type=”text/css”>
body {font-size:20px}
</style>
我们需要写兼容各邮箱的统一邮件模板，那么必然就要避开以上这种外联CSS写法，另外类似于float、position等成非正常内容流的style也会被过滤，假如你写了，很可能会影响到外部邮箱的表现。
下面我列出一些编写原则：
1、全局规则之一，不要写<style>标签、不要写class，所有CSS都用style属性，什么元素需要什么样式就用style写内联的CSS。
2、全局规则之二，少用图片，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上alt。
3、不要在style里面写float、position这些style，因为会被过滤。那么如何实现左右布局或者更复杂的布局呢？用table。
4、style内容里面background可以设置color，但是img会被过滤，就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给一个单元格加一个背景，必须这样写：
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>
5、div模式的邮箱不支持flash，iframe模式的有待验证。
最后提一句，sohu的邮箱很怪异，会在每个文本段后面加一个空格，导致原本正常的排版一行放不下而换行，从而使某些布局错乱。所以，如果你要兼容sohu邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。
4月 29th, 2008 at 12:03 上午
这篇文章很好。
我现在一般的写法是只使用表格布局；style直接写到标签里，比如<td style="xxxx">；背景图片不用style写，比如<td background="xxxx">；邮件里也不能放iframe和flash，只能放最基本的图片和链接。
我这边有个表格，阐述了各主流邮箱系统对html和css的兼容性，什么时候整理以后发上来。
4月 29th, 2008 at 9:14 上午
期待看到你的表格
4月 29th, 2008 at 9:47 上午
看到了广告suzhou.jipingmi.com
不过打不开
莫非楼主是苏州的
4月 29th, 2008 at 10:17 上午
这篇文章很好，可以参考下apple推送的活动邮件，style在gmail里支持还不错，其他的估计就不行了。
4月 29th, 2008 at 10:47 上午
@4、background可以设置color，但不能指定图片，因为会被过滤。但是有一个很有意思的元素属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。
是可以定位的啊。比如background:#123456 url(’123.jpg’) no-repeat 1px -1px;
或者是我理解错博主的意思了？
4月 29th, 2008 at 10:56 上午
这用的什么调试工具啊？
4月 29th, 2008 at 12:20 下午
学习了。很不错的文章。
4月 29th, 2008 at 12:45 下午
不错。顶一下~
4月 29th, 2008 at 1:39 下午
方舟，我原文改了一下，你再看看。
Jenson，这个插件是FF上的firebug，前端工程师必备工具。
4月 29th, 2008 at 2:04 下午
受教了。这篇文章真的不错，我前一阵子也遇到这样的问题，很多问题无法解决，最后只能用最低级html语言将问题解决了80%左右。
但目前还有一个关于邮件信纸的问题。
我给公司做了统一的邮件样式，但用户的邮件客户端软件版本较多，造成许多同事用着都出现了问题，不知道你在这方面有没有研究？
测试的邮件客户端有：
foxmail6.0正式版
outlook2003
outlook2007
主要问题是背景，我做了一张不小的浅色背景放置在每封邮件的右下角。
4月 29th, 2008 at 5:39 下午
楼上，对邮件客户端我没有研究过。
4月 30th, 2008 at 11:54 上午
[…] 几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送HTM–Read More […]
4月 30th, 2008 at 5:55 下午
前段时间我也一直在思考这个问题：怎么编写这种html邮件。不过我想实现Youtube视频的发送，接收者可以在邮箱里就看到视频。不知道能不能实现？！
4月 30th, 2008 at 6:22 下午
[…] 前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》，很不错。 在这里，我也要把我的经验和大家分享一下。 […]
4月 30th, 2008 at 6:28 下午
咦，口碑的博客怎么做trackback?我这篇贴在这里了：
http://www.inpeck.com/blog/2008/04/30/suggestions-of-email-document/
5月 1st, 2008 at 8:47 下午
好文，真用心，顶！
5月 2nd, 2008 at 12:40 上午
呵。确实值得引用……
全单拿走了。。
3Q
6月 24th, 2008 at 3:30 下午
真不错啊，我正头疼怎么搞那,你真好！
7月 1st, 2008 at 10:04 上午
头疼,表格在outlook7里面有外边距,图片之间也有边距,造成断行…