EDM 制作规范
只使用 <div> <a> <span> <table> <tr> <td> <br> <map> <area> 标签可以避免很多默认样式造成的错位问题
请在行间书写 CSS
<div style="height: 69px;"></div>如不考虑outlook客服端。可以把CSS写在 <style> 标签内
<style>
.box{ height: 69px;}
</style>
<div class="box">text</div>不要使用类似 font-family:微软雅黑; 的中文字体样式，建议使用 Microsoft Yahei。因为中文字体容易被解析成 style="font-family:"微软雅黑"" 出现2对 " 导致整条样式失效。
不要使用 float:left; position:absolute; 会因为邮箱兼容性导致错位
使用简单的嵌套 <table>，提高邮件在各大客户端的兼容性。
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:left;">左侧</td>
<td style="text-align:right;">右侧</td>
</tr>
</table>务必在 <table> 中加上 border="0" cellpadding="0" cellspacing="0"
尽量不要使用 table 跨行跨列：
<td rowspan="2" colspan="2">因为跨行跨列后代码会变得很难维护而且部分邮箱不兼容，尽量使用多个 table 嵌套实现功能。
比如要实现一个 1:1:2 的布局：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</td>
<td> 2 </td>
</tr>
</table>建议在每个单元格内设置宽度
<td width="200"></td>width height 属性中不要设置 px ，会在 outlook 失效
<td width="200px"></td> 错误邮箱不完全不支持JavaScript Flash，部分邮箱支持 form表单
// 可以
<a href="http://www.emailcar.net/index.html">
// 不可以
<a href="index.html">模板加入预览退订投诉信息，加在头部或底部（根据设计稿），如果没有设计进去，默认加在头部。
此链接只适用于 http://www.emailcar.net
<%=unsubscribe%> 退订变量
<%=complaints%> 投诉变量
<%=tplview%> 预览变量需要插入视频，用下面这种方式兼容性比较好，需要考虑的是没有显示视频设置一个背景图片（163，QQ，sina等主流网页邮箱支持）
<video width="320" height="240" controls autoplay>
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
<source src="http://www.w3school.com.cn/i/movie.webm" type="video/webm" />
<object data="http://www.w3school.com.cn/i/movie.mp4" width="320" height="240">
<embed width="320" height="240" src="http://www.w3school.com.cn/i/movie.swf" />
</object>
</video>- 建议不使用背景图片，部分客户端是不显示图片，如果使用则要同时添加背景颜色。
- 图片属性添加display:block，因为在图像下填充额外的像素
- 图片属性添加border:0;，因为加链接会产生蓝色边框
- 建议图片都设置固定的宽和高
- 图片真实尺寸应该与设置 的
widthheight一致 - 图片储存尽可能小，JPG(质量为50-80)。GIF PNG8(质量128) 颜色比较丰富的图片用JPG格式，图会清晰点 文件也小点 颜色比较单一的用GIF PNG8，图会清晰点 文件也小点
- style放于src之前
<img style="display:block;border:0;margin:0;padding:0;" src="http://xxxxxxxx.jpg"> - 同一个td中尽量只放一个img
- 可能的话图片Alt属性,大多数邮件服务器都屏蔽图片(尤其outlook)，所以在一片红叉的时候，能够让用户看到图片原本的意义是很重要的
- 少用map图片链接,很容易被当置垃圾邮件
若遇到大片空白布局,<td></td>中不写任何东西的话,邮件会以 填补空白,那么各式邮件就会加以默认行高等等,导致错位
<table>
<tr>
<td width="50"><div style="font-size:0px;height:2px;"></div></td>
<td width="100"><div>文字段落文字段落文字段落文字段落文字段落</div></td>
<td width="50"><div style="font-size:0px;height:2px;"></div></td>
</tr>
</table>空白会被自动和谐,>,<,/等等会导致标签错位
<a>点击跳转>>></a><a>点击跳转>>></a> 错误免费、优惠、特惠、特价、低价、便宜、廉价、视频、赚钱、群发、发财、致富、代开、薪水、交友、支付、商机、法宝、宝典、秘密、情报、机密、保密、绝密、神秘、秘诀等。如果一定需要，请把敏感字制做成图片
- padding需要写在上，写在其它地方无效。
- 背景图片也不兼容。outlook支持纯色
- css必须在行间，在头部不支持
- Outloo k有默认的line-height，自己设置line-height无效（在切图的时候要注意多预留空隙）
- Outlook Web App 中
<img />标签的style=""样式会被全部清除，如果要兼容 Outlook Web App 需要考虑 img 无样式时候是否显示正常
- 建议
- 给
<tr>、<td>加背景颜色（如果有背景图片，需截取和背景色相仿的颜色做背景色） 不提倡用：<td background="#f4f4f4">建议用法：<td style="background-color:#f0f0f0;"> - 给文字模块的加属性
cursor: default; - 由于outlook自带line-height,会造成文字高度溢出。 对大段文字用div了拆分每一行，用div的height来控制行高，不依赖自动换行，更加精确。 例子（经典的三格布局）：
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<img src="" style="display:block; padding:0px; border:0px; margin:0px;" />
</td>
<td style="background-color:#f4f4f4;">
<div style="width:608px;height:84px;color:#2c2c2c;font-family:Microsoft Yahei; font-size:14px;line-height: 28px;padding:0; margin:0; border:0px;">
<div style="width:608px;height:28px;padding:0; margin:0; border:0px;">第一行文字</div>
<div style="width:608px;height:28px;padding:0; margin:0; border:0px;">第二行文字</div>
<div style="width:608px;height:28px;padding:0; margin:0; border:0px;">第三行文字</div>
</div>
</td>
<td>
<img src="" style="display:block; padding:0px; border:0px; margin:0px;" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>