前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》，很不错。
在这里，我也要把我的经验和大家分享一下。

众所周知，Email是一项最古老的互联网应用之一。
因此，不少邮件系统还是会采用一些比较古老的处理方式，导致前端方面很多新的技术、新的特性无法被支持。
而且各个邮箱系统以及客户端的差异，也会使email的最终呈现出现很大的偏差。
HTML细节
就目前来说，如果要做一个email页面，为了保证最大的兼容性，有以下几点需要注意：
对于纯文本邮件：
  1. 邮件标题不要超过18个字；
  2. 每行不要超过34个字。
对于HTML邮件：
  1. 邮件标题不要超过18个字；
  2. HTML代码和图片尽量不要超过50kb；
  3. 页面宽度推荐500px，最大不要超过600px；
  4. 避免使用边缘的、非主流的HTML技术；
  5. 不使用css来布局，应该使用表格来布局；
  6. 不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style=" font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
  8. body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
  9. 如果整个邮件有用到背景色或背景图，建议用以下方式处理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 邮件内容 -->
    </td>
    </tr>
    </table>
  10. 有背景图片的时候，我们要采用这种写法：<table background="background.gif" cellspacing="0" cellpadding="0">
图片屏蔽
由于图片可以用来侦测邮件的打开率和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似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。
一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：
  1. 重要内容尽量避免使用图片，比如标题、链接等；
  2. 制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；
  3. 所有图片都要加上alt属性；
  4. 所有的图片都要定义高和宽；
  5. 通知收件人把你的发件地址加入白名单。
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>中的<link>标签
N o
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No
<body>中的<link>标签
No
No
No
No
Yes
Yes
Yes
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-p_w_picpath
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-p_w_picpath
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支持。