HTML邮件兼容问题

最新推荐文章于 2024-04-20 17:39:00 发布

Young_Gao

最新推荐文章于 2024-04-20 17:39:00 发布

阅读量1.1w

点赞数 2

分类专栏： js+html 文章标签： HTML邮件兼容问题

js+html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

先来两个传送门感受一下：

https://blog.csdn.net/sunslee/article/details/6065825

https://segmentfault.com/a/1190000008864116

几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发送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支持。

HTML 邮件内容虽然也是 HTML，但是和我们在网页上使用的 HTML 不同，因为安全原因，各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本 HTML 展示。

在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式。

尤其是鼎鼎大名的 OutLook，从 OutLook2007 开始便使用 Word HTML 引擎进行渲染，为了它的安全性从而使得整个邮件倒退回了 2000 年前，为了邮件的兼容性你不得不使用很多废弃的标签、属性，并且这一状况将会维持无数个
年头，因为虽然万事终有尽头，但 OutLook 始终存在。

“我们将继续使用 Word 创建电子邮件信息，因为我们认为它是制作电子邮件最好的。”——Outlook 团队如是说。

因为微软一向地特立独行，使得 OutLook 成为了最难啃的骨头。因为 OutLook 支持的标签和属性少得可怜，所以只要兼容了 OutLook，其他邮箱客户端基本都不会有什么问题。如果你开始开发 HTML 邮件并打算为其在各个邮箱里的兼容性努力，下面的建议将非常有用。

基本规则

布局使用 `table`

这几乎是 HTML 邮件与普通 HTML 页面最大的区别，因为各个邮箱对 div + css 这一套布局的解析问题很大（如 float / position 等 CSS 都会被过滤，甚至 margin: 0 auto; 都不起作用），基本各大邮箱都会解析混乱，所以老式的 table 布局是上乘之选。这就意味着 HTML 邮件中几乎只有这几个元素——table / tr / td / span / img / a，尽量避免使用 div / p 或是其他标签。

而且并不是所有邮箱都支持 colspan / rowspan 属性，所以所有布局都需要使用 table 嵌套解决。

使用表格布局导致的最直接的问题就是会产生多余的空白像素，所以要养成习惯给每个 table 都加上边框 border，单元格内边距 cellpadding，单元格间距 cellspacing，边框合并属性 border-collapse 这些属性：

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <!-- ... -->
</table>

`body` 外的内容几乎没用

我们知道完整的 HTML 包括 DOCTYPE 声明、html 和 head 标签及其内容、body 标签，对于在一个 iframe 中显示邮件内容的邮箱还好，会保留上述结构，但是有些邮件（如 Gmail）都是在 div 中直接包含，这就对安全要求极为苛刻。安全原因邮箱会默认把上述结构做删除处理，所以写了几乎没有作用，在可能的情况下尽量把内容写到 body 内，甚至建议从 table 开写，直接放弃 DOCTYPE / html / head / body 标签。

使用内联样式

与普通 HTML 页面开发一样，HTML 邮件依旧离不开 CSS，HTML 邮件并不支持外部的 style 文件，上面讲到 head 标签极有可能被删除，所以不要试图在 head 标签内写 style 标签。

那么在 body 内写 style 标签是不是就保险了呢？并不是！典型的就是 Gmail 邮箱，会把 HTML 邮件内所有 style 标签删除，这就意味着只有內联 style 属性内的 CSS 是唯一可靠的样式信息。

能用属性就不要用样式

并不是使用 style 属性就保险了，很多邮箱会对特定标签的属性做强制改造。

比如在 OutLook 中，图片使用以下方式来设置宽高是无效的：

<img style="width: 10px; height: 10px;" src="*.png" />

正确的设置方法：

<img width="10" height="10" src="*.png" />

所以在有属性能够实现样式效果的时候尽量使用属性，常见的可用属性有：

width
height
bgcolor
align
valign
……

所有样式单独指定

在写页面的时候利用 CSS 的继承会为我们带来很多便利，但是到了 HTML 邮件，一切都要 say NO!

其实继承规则依旧有效，但是大部分邮件都无法完整继承样式，并且邮箱的默认样式也会对邮件产生一些头疼的干扰。比如 font-family，OutLook 中若想改变字体，至少每个 table 中都要指定 font-family，而在 QQ 邮箱甚至必须每个 td都设置 font-family 才能全部生效。

因此每个标签单独指定样式是必须的，尽可能不要依赖继承，即使它十分地繁琐。

脚本？想都不要想！

如题 (￣▽￣)"

图片相关

背景图片

style 内容里面 background 可以设置 color，但是 image 会被过滤，就是说不能通过 CSS 来设置背景图片了。但是有一个很有意思的元素属性，也叫 background，里面可以定义一个图片路径，但是功能有限，比如无法定位背景图片等。

例如要给一个单元格加一个背景，必须这样写：

<td background="*.png">
    <!-- ... -->
</td>

当然，不使用背景图片是最好的选择 ╮(╯-╰)╭

指定 `width` 和 `height` 属性

因为在有些邮箱里，图片不是默认加载的，往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构，加上 alt 属性更可以明确告知图片的内容让用户选择是否下载它们。

如果因为项目需要（比如需要适配 Retina 高分屏），width 和 height 属性更是必不可少的，并且由于一些 outlook 版本的奇葩表现，width 和 height 属性一定不要加上单位！一定不要加上单位！一定不要加上单位！重要的事情说三遍。

`margin` 与 `padding`

Outlook 2007-2013 不支持图片的 margin 与 padding 样式，必要的时候可以尝试 hspace 和 vspace 属性：

<img vspace="10" hspace="10" src="*.png" />

或者为图片本身添加额外的空间（这个实在太LOW了，不推荐）

文字相关

字体

在 HTML 邮件中，font-family 只支持系统字体，不支持自定义字体，也不支持 font 简写，color 尽可能也不要使用简写：

font: 12px / 14px Arial, sans-serif; 
color: #999;

需要写成：

line-height: 14px; 
font-size: 12px; 
font-family: "微软雅黑", Arial, sans-serif; 
color: #999999;

对于加粗字体，我们可以使用 b 标签而不是 CSS 的 font-weight，前文说过，HTML 标签和属性能解决的样式决不使用 CSS 样式。

行高

在 OutLook 中会有个默认的行高最小值，特别是当设置 font-family 为微软雅黑时，默认的行高差不多为 Word 中的两倍行距，如果 line-height 设置的值小于默认的行高，无论你设置的是多少，则始终使用默认值，在很多情况下这是不能忍的，好在有个神奇的 mso-line-height-rule，使用行高时添加 mso-line-height-rule:exactly; 就能使行高始终等于我们所设置的值。

<td style="mso-line-height-rule: exactly; line-height: 36px;">
    <!-- ... -->
</td>

这只是微软的 CSS 属性，对其他客户端没影响。并且该属性只在块元素上有效，所以想在 font 和 span 中用就洗洗睡了吧。

Young_Gao

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML邮件兼容问题

先来两个传送门感受一下：https://blog.csdn.net/sunslee/article/details/6065825https://segmentfault.com/a/1190000008864116 几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯文本格式已不能满足界面和交互的要求，这时候我们就需要发...
复制链接

扫一扫