如何编写兼容各主流邮箱的HTML邮件

最新推荐文章于 2022-05-09 12:27:06 发布

sunslee

最新推荐文章于 2022-05-09 12:27:06 发布

阅读量4.9k

点赞数

分类专栏： HTML 文章标签： html gmail lotus yahoo css email

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近一个需求中遇到了发送邮件的功能，发现很多css在邮件里是有限制的，通过对以前的各位达人总结的学习，解决了这个问题，现转载如下。

几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送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邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。

HTML细节

就目前来说，如果要做一个email页面，为了保证最大的兼容性，有以下几点需要注意：

对于纯文本邮件：

邮件标题不要超过18个字；
每行不要超过34个字。

对于HTML邮件：

邮件标题不要超过18个字；
HTML代码和图片尽量不要超过50kb；
页面宽度推荐500px，最大不要超过600px；
避免使用边缘的、非主流的HTML技术；
不使用css来布局，应该使用表格来布局；
不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style="font-family:arial,helvetica; font-size:10pt; color:#000000"> ... </font>
不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
如果整个邮件有用到背景色或背景图，建议用以下方式处理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td width="100%" height="100%" bgcolor=".....">  </td> </tr> </table>
有背景图片的时候，我们要采用这种写法：<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似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。

一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：

重要内容尽量避免使用图片，比如标题、链接等；
制作一份和邮件内容一样的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>中的<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-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支持。