总结回顾
一、HTML Email的编写开发场景
- 你下单 可能 电商会给你发一份 详情邮件
- 招行可能给你发下你的账单邮件
- 生日了给你发个邮件
- 转正了给你发个邮件
- 入职周年邮件
二、遇到的问题
Email的兼容性很差
邮件内容所在上下文或者说所在外部容器（以下简称环境）都是由邮箱服务商决定的，不同的邮件服务商对前端样式布局支持都存在在一些差别。这就要求邮件内容需要在任何一种情况下都要正常兼容显示。
Email容器不同
你写的邮件前端代码可能被放在一个iframe中，那你的内容是被放在body里面的；可能放在一个div中，你的内容就被放在这个div里面。
Email自带设置
邮箱软件本身设置设置了些css，他可能对你产生未知的影响。可能根本没有申明doctype，即使申明了，也不是你想要的doctype。
避免被嵌套在不正确的容器里
因为容器可能是body或div，我们邮件内容不应该是一个完整的html。所以邮件内容应该是以div为根节点的html片段。
三、环境（外部容器）
我们写的邮件代码在不用的邮件服务商下，对应的外部容器不太一样。
QQ邮箱：自己编写的内容被嵌套在一个div中
四、开发的Doctype
一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。使用这个Doctype，也就意味着，不能使用HTML5的语法。
五、开发的布局
- 网页的布局（layout）推荐使用表格（table）
- css内嵌，不能在head标签中写style，也不能外联。
- 不能用浮动的方式定位。position：absolute;float:left;等都不行，float在qq邮箱客户端中可以识别，但是在outlook中无法识别。
- 为了保证兼容性，需要把邮件的宽度设置为600px，最大600px；
网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景。 在内层，放置第二个表格。用来展示内容。第二个table的宽度定为600像素，防止超过客户端的显示宽度。
六、开发的样式
- 避免css冲突或被覆盖
- 尽量使用div、span等无语义标签。
- 尽量避免CSS属性值的简写形式
- font-size:0; 很重要，否则qq邮箱 会自动填写很多空格，影响布局
- 减少不必要的间隙和空格等存在，影响页面美感
错误的写法
<div style="font: 8px/14px Arial, sans-serif; margin: 1px 0;">
推荐写法
<div style="margin-top: 1px; margin-bottom: 1px; margin-left: 0; margin-right: 0;">
所有的CSS规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除。客户端对CSS规则的支持情况 另外，不要采用CSS的简写形式，有些客户端不支持。因为环境中可能已经设置了css，比如一些reset、一些.class。 所以我们只能使用行内style来确保我们的效果，并且在内容根节点上设置基础style，并且尽量使用div、span等无语义标签。
七、开发图片
- 少用img，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片
- 需要img的话，一定要写好alt和title；
- Outlook中img最高1728px，超过1728 的部分会被截掉
- Outlook可能自动缩小img，使其最高位1728px，（上次测试没缩放，直接裁了）
- 建议剪裁img，堆叠在一起
- 有些客户端会给img链接加上边框，要去除边框。
<img border="0" style="display:block;
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
border:none;">
图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。 有些客户端会给图片链接加上边框，要去除边框。 需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。
八、开发的background
- 少用background 推荐尽可能使用切割的img
- Gmail也不支持css里面的背景图
- 在outlook2007、Outlook2010中，背景图片将无法显示
图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。 有些客户端会给图片链接加上边框，要去除边框。 需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。
九、email兼容总结
- 最好使用TABLE标签布局 ，通过tr td来控制距离 空白区域等
- 每个标签设置：margin:0;padding:0;font-size:0;（注意拆开写）
- 设置 width, height
- 少用img ,少用background
- 邮件不支持js，a标签慎用
- 在使用行高前建议添加mso-line-height-rule:exactly
- margin:0; padding: 0;colspan="1" height="375" 顺序不可换
客户端：foxmail outlook QQ邮箱 为了应付Email的怪癖，花了很多时间测试，确保搞定了所有Outlook的坑洼沟洄 但是....还是不可避免有兼容问题 如果你只要兼容 Foxmail and qq邮箱，那你几乎可以像写web一样写邮件。 由于邮件客户端对css支持各有不同，所以一定要多测试再发送，保证样式的正确。如果出现了不兼容的情况，一定要耐心的使用最简单的方式进行兼容，尽量少用特殊标签及比较复杂的属性。
来源：团队日常总结分享
