如何编写兼容各主流邮箱的HTML邮件
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通,如注册确认、营销推广。这些由站方发给会员的信件,往往纯文本格式已不能满足界面和交互的要求,这时候我们就需要发送html页面。 几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通,如注册确认、营销推广。这些由站方发给会员的信件,往往纯文本格式已不能满足界面和交互的要求,这时候我们就需要发送html页面。由于html邮件不是独立的host在本站的页面,是寄人篱下的。所以编写html邮件与编写html页面有很大的不同。因为,各面向网民的主流邮箱都或多或少的会对它们接收到的html邮件在后台进行过滤。毫无疑问,js代码是被严格过滤掉的,包括所有的事件监听属性,如onclick、onmouseover,这是基于邮件安全性的考虑。不仅如此,css代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的,能正常显示的html邮件。[br] [p]首先,我们先来看看邮箱是如何展现html邮件的。我本人没有做过邮件系统,况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的。所以,我们只能通过前端展现,来推测哪些是被邮箱接受的写法,而哪些又是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina几个邮箱的分析,我把邮箱分为两类:[br]第一类包括gmail、hotmail、sohu,这类邮箱,邮件内容是被布局在整个邮箱页面中的某个div中。如图:[/p] [p][img]http://info-database.csdn.net/upload/2008-05-06/gmail.png[/img][/p] [p]第二类,包括163、sina,这类邮箱,邮件内容被布局在独立的iframe中。如图:[/p] [p][img]http://info-database.csdn.net/upload/2008-05-06/sinamail.png[/img][/p] [p]熟悉html的朋友都知道,iframe内容是作为独立的document,与父页面的元素和css是互不相干的,几乎可以作为一个独立的页面来对待。而如果如果邮件内容是在div中,那么邮件内容是作为整个邮箱页面的一个组成部分。显然,以iframe作为展现方式的邮箱,对邮件内容就会宽容许多,因为它给了你一个足够独立的表现空间。而div就不是那么客气了。试想一下,如果你在你的邮件里写上这么一句css,是不是整个邮箱的展现页面上字体都变成20px而因此乱了套:[br][br]我们需要写兼容各邮箱的统一邮件模板,那么必然就要避开以上这种外联css写法,另外类似于float、position等成非正常内容流的style也会被过滤,假如你写了,很可能会影响到外部邮箱的表现。[/p] [p]下面我列出一些编写原则:[br]1、全局规则之一,不要写 |