转载：http://www.maildesign.cn/archives/1380

在我们的日常工作中，经常需要发送邮件和我们的会员沟通。如注册确认、营销推广等。这些由站方发给会员的信件，往往纯文本格式不能满足界面和交互的要求，我们需要发送HTML邮件。由于HTML邮件不同于HTML网页，不是存放于自己的服务器，是要通过邮件服务器来展现。所以编写HTML邮件与编写HTML页面有很大的不同。因为，主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。通过对各大主流邮箱的了解，我们可以知道哪些是可以使用，哪些是不可以实用的。这样可以帮助我们来制作一份相对完美的EDM邮件。

首先，我们先来看看邮箱是如何展现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、页面宽度推荐600-800px，最大不要超过800px；

2、制作HTML的email页面时，不使用css+div来布局，请使用table表格来布局。

3、定义文字或图片的样式时，请不要使用外链的css样式

（外链的css样式在邮件里将不能被读取，所以发送出去的邮件因为没有链接到样式，将会使你的邮件看起来很难看），

正确的做法请将样式书写在<td>或<font>里，写法如下：

<td style=”font-family:宋体; font-size:12px; color:#000000;” >文字</td>
<font style=”font-family:宋体; font-size:12px; color:#000000;” >文字</font>

4、不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML，如果页面中的图片一定要是动态的，请将FLASH文件转换成GIF动画使用。（Outlook 2007限制GIF动画，在Outlook 2007里，GIF将不能正常显示）

5、<table></table>以外的body、meta和html之类的标签是可以无视的，邮箱系统里会把这些过滤掉。

6、有背景图时，style内容里面background可以设置color，但是img会被过滤，就是说不能通过CSS来设置背景图片了。但可以直接写在代码里。代码写法如下：<table background=”background.gif” cellspacing=”0″ cellpadding=”0″>（在outlook中查看邮件时，背景图片不显示，这是因为outlook中对背景图片无法识别。同时，背景图需要用绝对地址）

7、如果文字内容是写在<li>里，那么样式请尽量写在<ul>里，在sohu中写在<td>或<tr>里的样式会被过滤，其它邮箱没有问题。例如：

<ul style=”font-family:宋体; font-size:12px; color:#000000;”>
<li>你的文字</li>
</ul>

8、在同一个里最好只放一个图片。如<img alt=”” src=”photo.JPG” />,所有的图片都要定义高和宽。这点很关键。图片必须设定高宽，关键图片alt=”…” 属性要写得很清楚，不要使用背景图片。写alt属性是让浏览器在图片未被显示前提示图片内容。不使用背景图片是防止部分web邮箱和客户端对背景图片进行过滤，例如Qq邮箱中的背景图片会随窗口的大小变化而产生移动，而outlook2007干脆就过滤了背景图片。

9、邮件内容里不要出现鼠标经过的事件”onMouseOut” “onMouseOver”，即使在里设置了，发送到邮箱后也将被过滤，将不能显示设定鼠标经过所显示的内容。

10、同一段文字请尽可能放在同一里。如果有3段文字，千万不要用回车换行。那样会导致代码里自动加入。这个标签会导致双倍行高。

11、制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话：“如果您无法查看邮件内容，请点击这里查看”，链到放有同样内容的web页面，这样即使用户收到的邮件图片无法浏览，通过链接也能正常查看内容；

12、HTML代码和图片尽量不要超过50kb（各个邮箱的收件标准不一样，如果超出50kb您的邮件很有可能会进入垃圾邮件箱里）。

13、邮件模板内的图片地址请不要写成本地路径，例如：<img alt=”””” src=””image/menu-5.gif”” />，（这样发送出去的邮件，收件人将没办法看到您的图片）；正确的写法请写成：

<img src=”http://www.hanlinweb.com/images/menu-5.gif” alt=”” />

14、邮件模板内的所有超链接请写成绝对地址，例如：翰林院网络营销；（以确保收信人在点击超链接时能够正常浏览您的内容）。

15、在样式中，可以省略font-family属性，但如果font-family：后属性为空，会被QQ屏蔽为垃圾邮件。

16、在制作HTML邮件内容时，请尽量保持您的链接数量不要超过10个，如果同一模板内所有图片的链接地址一样，请将所有的小图拼和成一张大图加链接。

17、制作模板时，希望邮件内容全部左右居中显示的话，请在设定table里的width=”100%”，而不要使用

设定居中。

18、设定邮件主题时，请不要在主题中加入带有网站地址的信息，比如“exxx.com祝您新年好”。那样只会进垃圾邮箱！

19、页面的文字中不要出现网址，例如： http://www.hanlinweb.com，此类文字即使加了超链接，被屏蔽为垃圾邮件的风险也是及高的。

20、书写标题时，在中文输入法下输入的标点符号在21CN中标题会显示乱码，请大家尽量将标点符号转化成英文输入法下的标点符号。

21、如没有特殊要求，图片的文件名称一律使用小写

22、不要在邮件中使用高度过小的图片，outlook2007不能很好的显示高度为1像素的图片，会出现拼合缝隙

23、在切图时，需要为文字区域留出一定的边距（5px左右，视行数和字数的多少调整），由于outlook中默认行间距和字间距大于普通网页，预留边距可以防止出现不必要的换行和图片缝隙。

24、因hotmail信箱的接收问题，段落之间不要用< p >标记，用< br >代替。由于Gmail的兼容性问题，假如td里有文字，如要定义该文字样式，必须在td里写style来定义字体，另外td内样式最好也加上这个style=”word-break:break-all;”，其作用在于不会让表格撑开，会自动换行(对IE5.5有效)

25、Tom邮箱的排版问题：在代码中尽量不要使用span标签，使用其他标签替代，可以参考模板中“小提醒”部分的代码写法

26、字体大小会发生变化，排版出现异常：使用table来排版，每个部分的样式用内联样式写法style=”…” ，例如：

<td style=”font-size:12px; color:#000000;”>
<a href=”http://www.hanlinweb.com”style=” color:#FFFFFF;”>文字</a>
</td>

这种写法使样式能准确的作用到每个html元素，防止部分web客户端过滤全局样式或者因同名样式引起的问题。其实这是每个edm制作方法中都会提到的问题，只是刚开始做edm的人大多都有偷懒的心态，事实证明这个懒偷不得

27、sohu的邮箱很怪异，会在每个文本段后面加一个空格，导致原本正常的排版一行放不下而换行，从而使某些布局错乱。所以，如果你要兼容sohu邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。

28、对于纯文本邮件：

邮件标题不要超过18个字；
每行不要超过34个字。
对于HTML邮件：
邮件标题不要超过18个字；
HTML代码和图片尽量不要超过50kb；
页面宽度推荐650px，最大不要超过800px；

附录：图片屏蔽

由于图片可以用来侦测邮件的打开率和email地址的有效性。
不少邮件客户端都会默认把邮件中的图片屏蔽，用户需要再点一下才能显示图片。

Blocking Issue	AOL v. 6.0-9.0	Gmail	Hotmail	Yahoo!	Outlook 2000/XP	Outlook 2003	Outlook Express w/SP2	Outlook Express w/o SP2
外链的图片是否默认被屏蔽	Yes	Yes	No	No	No	Yes	Yes	No
用户能否设置是否屏蔽图片	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes
能不能让用户点击某个按钮就显示邮件中的图片	Yes	Yes	Yes	No	No	Yes	Yes	N/A
当发件人在用户的联系人列表里时是否默认显示图片	Yes	No	Yes	No	Yes	Yes	Yes	Yes
发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念)	Yes	N/A	Yes	No	N/A	N/A	N/A	N/A
图片被屏蔽时是否显示alt属性	No	Yes	No	No	No	No	No	N/A
预览时显示windows的主题样式	No	No	No	No	Yes	Yes	Yes	Yes

来源：EmailLabs, 2004。国内用户常用的Foxmail似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。

一旦图片被屏蔽，整个邮件就会变得面目全非，这里再次重申一下：
重要内容尽量避免使用图片，比如标题、链接等；
制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；
所有图片都要加上alt属性；
所有的图片都要定义高和宽；
通知收件人把你的发件地址加入白名单。

Outlook 2007的限制

由于outlook 2007使用了word的渲染引擎来展现邮件内容，所以很多HTML属性没法得到支持了，比如：
背景图片(这一点很重要！)
css浮动和定位(这个没啥用)
自定义列表项的图像(这个也没啥用)
Flash(反正不放)
GIF动画
图片的alt属性(值得注意)
表单(反正不放)

附：Email客户端的CSS支持情况

本资料来自国外某邮件营销公司，所以缺乏国内邮件客户端的数据。

<style> 标签

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
<head>中的<style>标签	No	No	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
<body>中的<style>标签	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No

<link> 标签

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
<head>中的<style>标签	No	No	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
<body>中的<style>标签	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No

CSS 选择器

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
*	No	No	No	No	Yes	Yes	Yes	Yes	Yes	Yes	No
e	No	No	No	No	Yes	Yes	Yes	Yes	Yes	Yes	No
e > f	No	No	Yes	No	No	No	No	Yes	Yes	Yes	No
e:link	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:active,e:hover	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:focus	No	No	Yes	No	No	No	No	Yes	Yes	Yes	No
e + f	No	Yes	Yes	No	No	No	No	Yes	Yes	No	No
e [foo]	No	Yes	Yes	No	No	No	No	Yes	Yes	No	No
e.className	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e#id	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:first-line	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
e:first-letter	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No

CSS 属性

	gmail	Hotmail	Yahoo	Live Mail	Outlook/OE	AOL	Lotus Notes	Thunderbird	Mac Email	Entourage	Eudora
background-color	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
background-image	No	Yes, but	Yes	No	Yes *	Yes	Yes	Yes	Yes	Yes	No
background-position	No	No	No	No	Yes *	Yes	No	Yes	Yes	Yes	No
background-repeat	No	Yes	Yes	No	Yes *	Yes	No	Yes	Yes	Yes	No
border	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
border-collapse	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	No	No
border-spacing	Yes	No	Yes	No	No	No	No	Yes	Yes	No	No
bottom	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
caption-side	Yes	No	Yes	No	No	No	No	Yes	No	No	No
clip	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
color	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
cursor	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	No	No
direction	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	No
display	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	No
empty-cells	Yes	No	Yes	No	No	No	No	Yes	Yes	No	No
filter	No	No	Yes	Yes	No	No	No	No	No	No	No
float	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
font-family	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
font-size	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
font-style	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
font-variant	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
font-weight	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
height	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
left	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
letter-spacing	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
line-height	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
list-style-image	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
list-style-position	Yes	No	No	Yes	Yes	Yes	No	Yes	Yes	Yes	No
list-style-type	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
margin	Yes	No	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
opacity	No	No	Yes	Yes	No	No	No	Yes	Yes	No	No
overflow	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
padding	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
position	No	No	No	No	Yes	Yes	No	Yes	Yes	Yes	No
right	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
table-layout	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
text-align	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
text-decoration	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No
text-indent	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
text-transform	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
top	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No
vertical-align	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
visibility	No	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
white-space	Yes	Yes	Yes	No	No	No	No	Yes	Yes	Yes	No
width	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
word-spacing	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	No
z-index	No	Yes	Yes	No	Yes	Yes	No	Yes	Yes	Yes	No

(*) 不被Microsoft Outlook 2007支持。

本文在写作过程中，得到了口碑UED和其他一些朋友的帮助，在此感谢。

下载PDF版收藏：EDM-code-normal