html email(EDM)制作总结

      昨天接到一个页面:做邮件静态页面，我觉得很简单啊，几分钟的事。可是，一问主管才知道，并不是如我所想的那么容易。因为邮件系统为了防止接受垃圾邮件，会自动过滤掉很多内容。所以要避免你的邮件不被过滤成垃圾邮件，就必须要抛弃现有的div+css手法，回到html4.0的table时代，这意味着很多样式属性不能使用。一时间搞的我不知所措啦，好在有好多人帮我。好啦，不扯了，直奔主题。

以下内容是通过本人上网查找资料和大家帮忙后整理出来的经验小总结：

1.放弃div+css布局，全部改用table套table布局

2.放弃页面内部样式以及外部样式，也就是head部分的style和link，全面改为行内样式，而且尽量用标签自己的属性，如宽、高、边框，不要再放在style里面，而应该用td、img的width，height，border属性。即

<td><img src="xxx.jpg" style="border:0;width:100px;height:100px;"/>xxx</td>
应该写为：

<td><img src="xxx.jpg" border="0" width="100" height="100"/>xxx</td>

3.设置td中的文本，img对齐，放弃用text-align，改为用标签属性align和valign

4.每个img都要标明图片的width和height，除此以外，还要有alt和title属性，这样避免邮件系统过滤掉图片不显示，还要有两个关键的属性和样式，那就是border=0和display：block，因为没有前者，图片在ie6下面可能会有边框，没有后者tr与tr之间拼接图片的时候就会出现间隔

5.如果想让内容跟td边框有距离，尽量不用margin，因为有4钟邮件系统不支持，如果实在想用，用padding代替，因为它只有两个邮件系统不支持，最好的方法，是用空的td，加padding值的width或height达到效果。如，原来

<td style="paddding-left:20px">xxxx</td>   

————》<td width="20">&nbsp;</td><td>xxxx</td>

6.给table上背景色，用bgcolor而不是background-color

7.很多邮件系统不支持background-image、position、repeated，所以能用背景色的就用背景色，必须用图片的，就用img上

8.放弃css中的float和position定位，用align或valign,结合空td<td>&nbsp;</td>达到同样的效果

9.最后在几个邮件系统中测试一下

 

20140106 补充：

1.如果要给table设置背景色的话，如果要用十六进制颜色值表示一定用#ffffff这样6位的颜色值，ie的table不支持3位简写，所以就会出现设置的bgcolor="#fff",可是在ie里面显示是黑色背景

 最后附上几个帮助资料：

http://www.incollege.cn/node/74

http://www.xiaobai8.com/Blog/506.html

http://www.campaignmonitor.com/css/

 

 如有转载，请注明出处，尊重别人的劳动！