魔鬼时间：探究各邮件兼容性

（自从学日语之后每天光日语就竭尽全力了（而且还要追星不是）所以一直没更新，但是这个必须写一下……）

在探究邮件兼容性之前，先友情提示：请在防盗链白名单里加上各邮箱供应方的域名，以防图片 block。

这几周老板交给了我一个伟大而光荣的任务：

看到布局，是不是觉得很简单，经典送分题，从 CSS2.1 / HTML4.1 的年代到 CSS3 / HTML5，有无数种方式可以实现这种布局，当然，考虑到这是邮件，首先我们必须有个血泪的常识：

1. 请使用旧时代标签和 CSS 属性
2. 尽量使用内联样式

那也很简单，因为一开始大家就能想到，使用 <table> 布局就可以了嘛，从上古时代大家在用 FrontPage 和 Dreamevaer 时期就用的一个比 <div>+[xxx] 更古老的布局方法。

很快的在 Table 布局下我们得到了一个最初的结果，页面的效果看着还不错。发到 QQ 邮箱也基本没什么问题，这样就算兼容成功了吗？——不。

除了邮件和普通网页的差异外，各大邮箱供应方对于渲染规则的差异也差了十万八千里——基本可以看做 IE、Safari、Firefox 和 Chrome，QQ 邮箱是其中最好伺候的一个。

先来介绍一下除了 QQ 邮箱之外其他的坑，最后再来说解决方案。（另外网易邮箱问题也不大，莫非这方面国内做的比较好？）

新手：Google

gmail 是程序猿逼格的皇家选择，所以肯定也是要支持的，测试之后发现果然还是存在问题的：

1. 广告不显示：class 为 advertisement 之类的会被 Google 过滤，这个好说
2. <style>无效：实际上 QQ 邮箱相当于一个 framework 处理了一下，基本没有动原来的 DOM 结构，而 Google 则全部过滤了，这也就是为什么前面说要用内联样式的原因。
3. position 定义无效：Google 会把所有 position 设置成 relative，absolute 定位失效。

进阶：Outlook

Outlook 的问题比较玄学，之后在魔王级的钉钉邮箱中也会介绍到：

1. 解析规则：Outlook 对于 HTML 邮件解析规则为：先 render 一遍 HTML，然后将<style> 标签中的样式根据选择器置于 HTML 元素中，如果遇到相同属性，则进行覆盖。这个也很好解决，只需要重新定义一下，搞清楚优先级就行了。

魔王：钉钉邮箱

Outlook 的第二点基本堪称魔鬼，而巧的是，钉钉邮箱在 Outlook 的基础上，又想出了一些新技能：

1. style height 无效：将 height 的样式设置自动覆盖为 auto，!important 拔高优先级也没用（原因可以参考 outlook-2），图片的 height 属性不受影响。

解决之路

在此之后我尝试了很多种上古写法来解决，但是最终还是没有很好的方案，兼容性基本都烂的一团糟，好不容易一个改好了，另一个更屎了，于是，我想到了：table 里套 table 的终极方案。

我们知道当年布局主要靠 position/float，而 position 没有用的话，基本宣告了 <div> 的死亡。只能降级到更古老的时代，实际上，table 确实可以保证横向布局和纵向布局的切割，比如最后的积分兑换，对于 table 而言其实只是两行元素。对于模拟面试而言也就是三行元素而已。

不过，这只解决了纵向布局的问题，别忘了，height 是会被无效的，而 table 虽然确实有 height 的属性，但已经被废弃了，因此我们要另谋出路，这里提供两个主要方案：

1. 能用图片的用图片而不用 background-image 去撑开，事实上我差点就想要在后端把这几个渲染成图片直接贴上去发邮件了。
2. 使用 margin padding 去撑开高度。（这是一个非常 hack 的方法，请只在邮件客户端使用并自己进行高度计算）。

总结

这里只测了几个使用率比较高的邮箱，未对邮箱 App / 桌面应用测试（Mac 自带的 Mail.app 和钉钉内置的邮件客户端是可以了）

经过了这一番折腾，我这辈子都不想碰邮件客户端这种东西了，如果你也不幸被选中，那么请让设计师少一点套路，多一点真诚，布局简单点，多用图、少用背景（因为图片的宽高是可以随便撑开的）。