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

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

最近一个需求中遇到了发送邮件的功能，发现很多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页面，为了保证最大的兼容性，有以下几点需要注意：

对于纯文本邮件：

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

对于HTML邮件：

  1. 邮件标题不要超过18个字；
  2. HTML代码和图片尽量不要超过50kb；
  3. 页面宽度推荐500px，最大不要超过600px；
  4. 避免使用边缘的、非主流的HTML技术；
  5. 不使用css来布局，应该使用表格来布局；
  6. 不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style="font-family:arial,helvetica; 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-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支持。

 

转载自：

http://ued.koubei.com/?p=239

http://blog.csdn.net/liuyong0818/archive/2008/11/15/3305937.aspx

posted @ 2017-07-19 15:45  欲戴王冠，必承其重  阅读(1548)  评论(0)  编辑  收藏  举报