HTML 邮件兼容问题与解决方案

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 属性必定不要加上单位！必定不要加上单位！必定不要加上单位！重要的事情说三遍。

不然你但愿的是这样的：

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

而实际上它确是这样的：

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

由于加上单位会使一些版本的 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 中用就洗洗睡了吧。

使用前：

使用后：

不过这种实现方式有点瑕疵，就是会致使大号字体没法垂直居中，你们自行取舍吧 (lll￢ω￢)

参考文献

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

What You Should Know About HTML Email

EDM制做要点

Outlook HTML 渲染引擎