尽管都是用HTML语言，EDM和网页的制作差别还是随着现代电脑/手机等设备的升级，不断地分化着。可以说EDM是保守的极端，应该完全避免新技术（比如CSS3新属性，HTML5的新元素等）的应用。
总结几条EDM制作最基本的要点：
- 不能用div布局，更不能用浮动。所有关于布局都用老旧的方法 – table实现，如果有需要可以大表套小表，不过层级还是尽量精简；
- 不能用百分比来布局，每一个单元格（td）都要用固定宽度，必要时也固定高度。页面内容区宽度推荐600px；
- 除了图片可以外连，其他一切，包括CSS都不能外链，更禁用iframe这样的页面嵌套；
- CSS要完全嵌入html元素中，不能写在页头，当然更不能外链。完全不用CSS3的新属性；
- CSS2中应该禁用的常用属性有float，clear，position，top/left/right/bottom，overflow，z-index 等等…
- 完全禁用任何形式的Javascript和其他脚本
- HTML中应该禁用的，除了所有的HTML5新元素外，还有marquee，object，iframe，所有的表单元素和页头元素
以上7条是大限，不能违背，否则你的EDM会在90%以上的邮箱被屏蔽或者显示得面目全非。
制作EDM曾是我的常规工作之一，所以我用各种浏览器在大部分主流邮箱进行过EDM测试，这些邮箱包括QQ，126/163，Yahoo，Gmail，MSN，Outlook线上，另外还有Outlook客户端2003/2007/2010。大部分普通用户喜欢用浏览器登录在线邮箱收私人邮件，用Outlook收工作邮件。可以说要在所有的客户端做到100%的完美还原你的EDM设计稿，是不可能的。制作EDM打一开始就要放弃这种想法，得采用各种保守和折衷的方法来尽可能多的展现你需要展现的内容。根据我的经验，Outlook是兼容性问题最多的邮箱，因此本文测试重点为目前企业中最流行的Outlook 2010。
为了减少EDM出错的几率，除了要遵循上面的6个要点之外，还要尽可能注意以下几点：
1. 不要在很窄小的地方用list
其实所有的邮箱都支持ul/ol/li这类元素，但大部分邮箱会自己重写这些元素的默认定位样式，同时忽略掉一些你自己写的内嵌样式。最明显的就是margin和padding。所以如果实在是要用，那就不要另外再写样式给它定位。
下面是一个定了margin-left和padding-left的ul在浏览器中和在Outlook2010中表现出的差别，我是这样写的：
1 |
<ul style="margin-left:20px; padding-left:10px">...</ul> |
测试效果如图：
而放弃自己的定位，变成
1 |
<ul>...</ul> |
效果反而还不错：
我们有时候要在一个很窄的td里放一个list，就如上面图中显示的，在Outlook中每个li文字前面就有50px的空白用来承载圆点。如果你的td本来就不宽，这50px就会显得很浪费：
2. 只能定义系统字体，在td下定义好的字体只会在p容器中被继承
很多邮箱只认很少的几种系统默认字体，比如Arial, 中文的宋体。自以为为了美观，要在EDM加上非系统字体的，你会发现自己在白费力气。如果给一个td定义了字体，这个字体只会自动作用在这个td里的p容器中，如果要让字体作用在其他容器中，得给这些容器自己内嵌字体样式。
测试代码：
1 2 3 4 5 6 7 8 9 10 11 |
<table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="font-family:'Times New Roman'; font-weight:bolder"> <p>Shanghai Longines Global Horse Racing Champions Tour</p><br/> <span>Shanghai Longines Global Horse Racing Champions Tour</span><br/> <strong>Shanghai Longines Global Horse Racing Champions Tour</strong><br/> <div>Shanghai Longines Global Horse Racing Champions Tour</div><br/> <ul><li>Shanghai Longines Global Horse Racing Champions Tour</li></ul><br/> </td> </tr> </table> |
效果：
可见只有P元素沿用了td中定义的字体，如果要让其他元素也显示字体’Times New Roman’，需要单独给他们加style
3. 不要用背景图片
这是一个棘手的问题。其实在很多主流邮箱中，背景图片的支持都还不错。但Outlook和Lotus Notes都顽固地屏蔽掉了背景图片，无论你用html属性还是css定义，在这两个企业级的客户端中都是白费力气，而且这个光荣的传统从Outlook2000开始，到Outlook2010版都一直被继承了下来…
其实在用Outlook2003的时候我发现过一条解决方案，就是在页面上把添加的背景图片用一个像素的img元素另外展现出来…但这个“技巧”在Outlook2010中也被无情地KO掉了，目前就没有可替代的方案了。很多人都习惯在设计稿中忽略这个问题，等发现切出来的页面在邮箱中出现大块的空白色，还不知道问题出在哪里。因此要完全避免使用背景图片，在做设计稿的时候就得正视这个问题。如果你喜欢在漂亮的背景图片上添加文字，那干脆直接做成图片吧！
4. 关于图片
用图片去展现内容，记得给每个图片添加alt属性。在这里alt属性不是为了SEO，是为了让用户在还没有按下“下载图片”的按钮之前就知道EDM的内容。有时候也可以避免你的邮件直接被系统自动筛到垃圾箱中
切片不要切得太细，图片数量越少越好，图片不要横竖交错，要么全部横排，要么全部竖排。如果你喜欢横竖交错，在td元素里会不知不觉会多出一些colspan或rowspan，用浏览器看着好好的，但在邮箱中你会发现各种奇怪的图片错位问题，有时候会多出一条一像素的线，怎么调也去不掉，够头疼的。
5. 采用标准的表格起始样式
假如混排图片完成后还是不能解决多余的空白像素问题，需要给表格强制一些间距属性了，这其中包括边框（border），单元格内边距（cellpadding），单元格间距（cellspacing），边框合并属性（border-collapse）。要养成习惯给每个table都加上这些属性：
1 |
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">...</table> |
6. 页面背景色写在body里是没用的
很多邮箱会自动忽略body和以外的标签，那么你在body上定义的页面背景色就显示不出来了。如果需要添加页面背景色，就要在所有内容以外再添加一个table（div是不行的）。
1 2 3 4 5 6 7 8 9 |
<body> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color:#f9f9f9"> <tr> <td> <table width="600">...</table> </td> </tr> </table> </body> |
7. 给每个段落添加一个margin-bottom
Yahoo邮箱默认的p标签是没有外边距的，所有的段落挤在一起肯定很难看。我不知道Yahoo邮箱现在的市场份额是多少，貌似还挺多人用的，所以需要给每个段落增加一个margin-bottom，以便隔开。
1 2 |
<p style="margin-bottom">this is a paragraph...</p> <p style="margin-bottom">this is a paragraph...</p> |
8. 给每个单元格td定义对其属性
在浏览器中表格元素td如果没有定义过align或对应的CSS属性text-align，td内的内容会默认左对齐。但在一些邮箱中（比如微软网页版邮箱APP），如果没有定义td内的对齐，其内容会跟随上一级的对齐属性。比如如果table是居中的，那么td的内容也会跟着table居中。
为保险起见，应该给每个td都定义align或者CSS的text-align属性。
9. 为看不到图片的用户做一个在线版的EDM
我们花了很多力气美化的EDM，仍然有可能在用户信箱里面一张图片都显示不出，有些用户也确实不习惯点那个下载图片的按钮。于是我们最好在每个EDM上加一行文字，连接到这个EDM的在线网址，让用户有机会看到这个个“干净版”的EDM。这花不了你多长时间，它确实能很大程度的提高EDM被浏览的概率。
10. 做好测试！
在正式群发之前，要把完成的EDM发往尽可能多的不同邮箱/客户端进行测试，以及时发现问题。
写到这里，脑子里其实还有很多细节片段，但不知道应该怎么写。等想到了再回来添加吧。
做EDM其实是个吃力不讨好的活，没人会因为你会做EDM而觉得你很牛，而EDM的兼容性做得再好，可能也只有你自己知道。但无论如何做好每一个页面的兼容性是一个开发人员的职责。