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

问题描述：

今天给后端同学写了一个邮箱发送页面，由于之前没有这方面的经验，很多标签都是用最新的H5标签，样式也是很多C3样式，当时还考虑到IE低版本的兼容性，谁知道在浏览器中显示正常，在移动端显示就好像没有引入样式一样，反复查看代码感觉没啥毛病，最后在网上S了下，才焕然大悟。原来HTML 邮件内容虽然也是 HTML，但是和我们在网页上使用的 HTML 不同，因为安全原因，各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本 HTML 展示。简单来说就是目前很多流行的H5和C3标签都不能很好的显示。

解决方案：

整个页面重新翻写，用最原始的table布局处理，样式直接使用内联样式，幸好还支持@media多媒体属性，为了省时间，最终移动端页面直接使用整体布局缩小方式显示，在邮件中测试了下，感觉还OK。

案例：

知识扩展：（网上查的一些基本规则）

• 布局使用 table

这几乎是 HTML 邮件与普通 HTML 页面最大的区别，因为各个邮箱对 div + css 这一套布局的解析问题很大（如 float / position 等 CSS 都会被过滤，甚至 margin: 0 auto; 都不起作用），基本各大邮箱都会解