怎么编写兼容各主流邮箱的HTML邮件
日期：2014-05-17 浏览次数：20804 次
最近一个需求中遇到了发送邮件的功能，发现很多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 |
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
