html制作成邮件的兼容问题

序：

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