关于邮箱模板样式设计的一些思考

         如今邮件已成为人们生活不可缺失的一部分，我们也发现邮箱中会出现不同样式的邮件样式，给我们带来不同的感受。但是问题出来了：不同的邮箱显示同一个邮件的显示效果缺不尽相同？怎样才能设计一种通用的邮箱样式呢？

         问题：验证邮件样式无法正常显示（准确的说，不同的邮箱相同的样式显示效果有很大不同）--使用DIV+CSS设计模板样式

 

经过多次调试发现：

1. DIV定义的class和id的样式一般会被过滤掉
2. DIV内联的样式会被去除
3. Table内联样式的字体会被去除

 

改进方案：

1. 采用table结构
2. 使用内联样式定义
3. 内联样式不要定义字体样式
4. 使用图片样式（这种的话要预防邮箱设置不显示图片信息）

小例子：

<table background="http://picturepath" width="675px" height="570px" style="font-size:14px;margin:0 auto;">
     <tr><td style="padding:90px 64px 0px;font-size:16px">HI,</td></tr>
     <tr><td style="padding:10px 64px 10px;font-size:14px">感谢你注册***。</td></tr>
     <tr><td style="padding:0px 64px;font-size:14px"> 请点击下面的链接激活您的帐号，完成注册<br><a href="'#'" style="cursor:pointer;text-decoration:none;color:#0082cb">$url</a><br>（如果点击链接没反应，请复制激活链接，粘贴到浏览器地址栏后访问）</td></tr>
     <tr><td style="padding:30px 64px 10px;color:#959393;font-size:14px">激活邮件48小时内有效，超过48小时请重新注册。<br>激活邮件将在您激活一次后失效。</td></tr>
     <tr><td style="padding:30px 0px 10px 400px;font-size:14px">***<br>2013年10月10号</td></tr>
     <tr><td style="padding:10px 60px 80px;border-top:1px solid #ededed;color:#959393;font-size:14px">如您错误的收到了此邮件，请不要点击激活按钮，该帐号将不会被启用。<br/>这是一封系统自动发出的邮件，请不要直接回复，如您有任何疑问，请联系 <a href="#" style="color:#0082cb;cursor:pointer;text-decoration:none;">kefu@***.com</a></td></tr>
 </table>