如今邮件已成为人们生活不可缺失的一部分,我们也发现邮箱中会出现不同样式的邮件样式,给我们带来不同的感受。但是问题出来了:不同的邮箱显示同一个邮件的显示效果缺不尽相同?怎样才能设计一种通用的邮箱样式呢?
问题:验证邮件样式无法正常显示(准确的说,不同的邮箱相同的样式显示效果有很大不同)--使用DIV+CSS设计模板样式
经过多次调试发现:
- DIV定义的class和id的样式一般会被过滤掉
- DIV内联的样式会被去除
- Table内联样式的字体会被去除
改进方案:
- 采用table结构
- 使用内联样式定义
- 内联样式不要定义字体样式
- 使用图片样式(这种的话要预防邮箱设置不显示图片信息)
小例子:
View Code
<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>