转帖:口碑网UED Team » 如何编写兼容各主流邮箱的HTML邮件
2009-03-19 09:34
387 查看
04月 28 08年
几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通,如注册确认营销推广这些由站方发给会员的信件,往往纯文本格式已不能满足界面和交互的要求,这时候我们就需要发送HTML页面由于HTML邮件不是独立的HOST在本站的页面,是寄人篱下的所以编写HTML邮件与编写HTML页面有很大的不同因为,各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听属性,如onclickonmouseover,这是基于邮件安全性的考虑不仅如此,CSS代码也会被部分过滤本人要讲的就是如何编写不被各大主流邮箱过滤的,能正常显示的HTML邮件
首先,我们先来看看邮箱是如何展现HTML邮件的我本人没有做过邮件系统,况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的所以,我们只能通过前端展现,来推测哪些是被邮箱接受的写法,而哪些又是会被过滤掉的通过对gmailhotmail163sohusina几个邮箱的分析,我把邮箱分为两类:
第一类包括gmailhotmailsohu,这类邮箱,邮件内容是被布局在整个邮箱页面中的某个div中如图:
第二类,包括163sina,这类邮箱,邮件内容被布局在独立的iframe中如图:
熟悉HTML的朋友都知道,iframe内容是作为独立的document,与父页面的元素和CSS是互不相干的,几乎可以作为一个独立的页面来对待而如果如果邮件内容是在div中,那么邮件内容是作为整个邮箱页面的一个组成部分显然,以iframe作为展现方式的邮箱,对邮件内容就会宽容许多,因为它给了你一个足够独立的表现空间而div就不是那么客气了试想一下,如果你在你的邮件里写上这么一句CSS,是不是整个邮箱的展现页面上字体都变成20px而因此乱了套:
<style type=text/css>
body {font-size:20px}
</style>
我们需要写兼容各邮箱的统一邮件模板,那么必然就要避开以上这种外联CSS写法,另外类似于floatposition等成非正常内容流的style也会被过滤,假如你写了,很可能会影响到外部邮箱的表现
下面我列出一些编写原则:
1全局规则之一,不要写<style>标签不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS
2全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了图片上务必加上alt
3不要在style里面写floatposition这些style,因为会被过滤那么如何实现左右布局或者更复杂的布局呢?用table
4style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了但是有一个很有意思的元素属性,也叫background,里面可以定义一个图片路径,这是个不错的替代方案,虽然这样功能有限,比如无法定位背景图片了,有总比没有好例如要给一个单元格加一个背景,必须这样写:
<td background=http://image1.koubei.com/images/common/logo_koubei.gif></td>
5div模式的邮箱不支持flash,iframe模式的有待验证
最后提一句,sohu的邮箱很怪异,会在每个文本段后面加一个空格,导致原本正常的排版一行放不下而换行,从而使某些布局错乱所以,如果你要兼容sohu邮箱的话,遇到一些紧凑的布局就要格外小心了,尽量减少文本段的数量,留足宽度
如何编写兼容各主流邮箱的HTML邮件
Published by 大米几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通,如注册确认营销推广这些由站方发给会员的信件,往往纯文本格式已不能满足界面和交互的要求,这时候我们就需要发送HTML页面由于HTML邮件不是独立的HOST在本站的页面,是寄人篱下的所以编写HTML邮件与编写HTML页面有很大的不同因为,各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听属性,如onclickonmouseover,这是基于邮件安全性的考虑不仅如此,CSS代码也会被部分过滤本人要讲的就是如何编写不被各大主流邮箱过滤的,能正常显示的HTML邮件
首先,我们先来看看邮箱是如何展现HTML邮件的我本人没有做过邮件系统,况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的所以,我们只能通过前端展现,来推测哪些是被邮箱接受的写法,而哪些又是会被过滤掉的通过对gmailhotmail163sohusina几个邮箱的分析,我把邮箱分为两类:
第一类包括gmailhotmailsohu,这类邮箱,邮件内容是被布局在整个邮箱页面中的某个div中如图:
第二类,包括163sina,这类邮箱,邮件内容被布局在独立的iframe中如图:
熟悉HTML的朋友都知道,iframe内容是作为独立的document,与父页面的元素和CSS是互不相干的,几乎可以作为一个独立的页面来对待而如果如果邮件内容是在div中,那么邮件内容是作为整个邮箱页面的一个组成部分显然,以iframe作为展现方式的邮箱,对邮件内容就会宽容许多,因为它给了你一个足够独立的表现空间而div就不是那么客气了试想一下,如果你在你的邮件里写上这么一句CSS,是不是整个邮箱的展现页面上字体都变成20px而因此乱了套:
<style type=text/css>
body {font-size:20px}
</style>
我们需要写兼容各邮箱的统一邮件模板,那么必然就要避开以上这种外联CSS写法,另外类似于floatposition等成非正常内容流的style也会被过滤,假如你写了,很可能会影响到外部邮箱的表现
下面我列出一些编写原则:
1全局规则之一,不要写<style>标签不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS
2全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了图片上务必加上alt
3不要在style里面写floatposition这些style,因为会被过滤那么如何实现左右布局或者更复杂的布局呢?用table
4style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了但是有一个很有意思的元素属性,也叫background,里面可以定义一个图片路径,这是个不错的替代方案,虽然这样功能有限,比如无法定位背景图片了,有总比没有好例如要给一个单元格加一个背景,必须这样写:
<td background=http://image1.koubei.com/images/common/logo_koubei.gif></td>
5div模式的邮箱不支持flash,iframe模式的有待验证
最后提一句,sohu的邮箱很怪异,会在每个文本段后面加一个空格,导致原本正常的排版一行放不下而换行,从而使某些布局错乱所以,如果你要兼容sohu邮箱的话,遇到一些紧凑的布局就要格外小心了,尽量减少文本段的数量,留足宽度
相关文章推荐
- 如何编写兼容各主流邮箱的HTML邮件并发送
- 如何编写兼容各主流邮箱的HTML邮件[转]
- 如何编写兼容各主流邮箱的HTML邮件
- 如何编写兼容各主流邮箱的HTML邮件
- 如何编写兼容各主流邮箱的HTML邮件
- 编写不被各大主流邮箱过滤的能正常显示的HTML邮件的技巧
- 编写不被各大主流邮箱过滤的能正常显示的HTML邮件的技巧
- 主流邮箱能正常显示的HTML邮件的技巧
- 制作主流邮箱能正常显示的HTML邮件的技巧
- HTML+CSS编写静态网站-44 如何进一步学习
- 如何用手机接收自动化所邮箱的邮件
- 邮件系统高变动职位邮箱如何管理
- JIRA-如何为所有用户更新发送的邮件格式为HTML
- 如何将一个邮箱收到的邮件自动转发给多个其他用户呢?
- 如何让收件箱只收到感兴趣的邮件-针对国外用户邮箱的方法-Swizzle工具
- 如何使用 LotusScript 代理来发送 HTML 格式的邮件
- 如何选择一个合适的邮件系统和邮箱软件?
- 如何访问个人邮箱中的未读邮件
- 如何编写高效的存储过程(http://www.cnblogs.com/tom-fu/archive/2008/03/09/1096993.html)
- 【如何校验邮件地址的有效性】第一篇 :为什么要校验邮箱地址有效性?使用场景在哪里?