- 浏览: 164015 次
- 来自: ...
文章分类
最新评论
-
hellostory:
不知所云………………
如何使用反射访问类的private域和方法 -
xusong_zidingyi:
如果在linux下面的话就没有办法运行了,因为linux没有办 ...
使用tesseract破解checkCode -
javajava22:
Errors accessing files. There m ...
使用tesseract破解checkCode -
suncathay:
qljobs 写道cmd.add("E:/Works ...
使用tesseract破解checkCode -
zuoxu128:
TIFFImageWriteParam ,这个类是哪个包的啊
使用tesseract破解checkCode
最近一个需求中遇到了发送邮件的功能,发现很多css在邮件里是有限制的,通过对以前的各位达人总结的学习,解决了这个问题,现转载如下。
几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通,如注册确认、营销推广。这些由站方发给会员的信件,往往纯文本格式已不能满足界面和交互的要
求,这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面,是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大
的不同。因为,各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听
属性,如onclick、onmouseover,这是基于邮件安全性的考虑。不仅如此,CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流
邮箱过滤的,能正常显示的HTML邮件。
首先,我们先来看看邮箱是如何展现HTML邮件的。我本人没有做过邮件系统,况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的。所以,我们只能
通过前端展现,来推测哪些是被邮箱接受的写法,而哪些又是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina几个邮箱的分析,
我把邮箱分为两类:
第一类包括gmail、hotmail、sohu,这类邮箱,邮件内容是被布局在整个邮箱页面中的某个div中。
第二类,包括163、sina,这类邮箱,邮件内容被布局在独立的iframe中。
熟悉HTML的朋友都知道,iframe内容是作为独立的document,与父页面的元素和CSS是互不相干的,几乎可以作为一个独立的页面来对
待。而如果如果邮件内容是在div中,那么邮件内容是作为整个邮箱页面的一个组成部分。显然,以iframe作为展现方式的邮箱,对邮件内容就会宽容许
多,因为它给了你一个足够独立的表现空间。而div就不是那么客气了。试想一下,如果你在你的邮件里写上这么一句CSS,是不是整个邮箱的展现页面上字体
都变成20px而因此乱了套:
<style type=”text/css”>
body {font-size:20px}
</style>
我们需要写兼容各邮箱的统一邮件模板,那么必然就要避开以上这种外联CSS写法,另外类似于float、position等成非正常内容流的style也会被过滤,假如你写了,很可能会影响到外部邮箱的表现。
下面我列出一些编写原则:
1、全局规则之一,不要写<style>标签、不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS。
2、全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了。图片上务必加上alt。
3、不要在style里面写float、position这些style,因为会被过滤。那么如何实现左右布局或者更复杂的布局呢?用table。
4、style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素
属性,也叫background,里面可以定义一个图片路径,这是个不错的替代方案,虽然这样功能有限,比如无法定位背景图片了,有总比没有好。例如要给
一个单元格加一个背景,必须这样写:
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>
5、div模式的邮箱不支持flash,iframe模式的有待验证。
最后提一句,sohu的邮箱很怪异,会在每个文本段后面加一个空格,导致原本正常的排版一行放不下而换行,从而使某些布局错乱。所以,如果你要兼容sohu邮箱的话,遇到一些紧凑的布局就要格外小心了,尽量减少文本段的数量,留足宽度。
HTML细节
就目前来说,如果要做一个email页面,为了保证最大的兼容性,有以下几点需要注意:
对于纯文本邮件:
- 邮件标题不要超过18个字;
- 每行不要超过34个字。
对于HTML邮件:
- 邮件标题不要超过18个字;
- HTML代码和图片尽量不要超过50kb;
- 页面宽度推荐500px,最大不要超过600px;
- 避免使用边缘的、非主流的HTML技术;
- 不使用css来布局,应该使用表格来布局;
- 不使用外联的css样式,而使用font标签来定义样式,定义链接颜色时也是如此,写法如下:
<font style="font-family:arial,helvetica; font-size:10pt; color:#000000">
...
</font> - 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ;
- body和meta之类的标签是可以无视的,因为在很多邮箱系统里它会被过滤;
- 如果整个邮件有用到背景色或背景图,建议用以下方式处理:
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%" height="100%" bgcolor=".....">
<!--- 邮件内容 -->
</td>
</tr>
</table> - 有背景图片的时候,我们要采用这种写法:
<table background="background.gif" cellspacing="0" cellpadding="0">
图片屏蔽
由于图片可以用来侦测邮件的打开率和email地址的有效性。
不少邮件客户端都会默认把邮件中的图片屏蔽,用户需要再点一下才能显示图片。
Blocking Issue | AOL v. 6.0-9.0 | Gmail | Hotmail | Yahoo! | Outlook 2000/XP | Outlook 2003 | Outlook Express w/SP2 | Outlook Express w/o SP2 |
外链的图片是否默认被屏蔽 | Yes | Yes | No | No | No | Yes | Yes | No |
用户能否设置是否屏蔽图片 | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes |
能不能让用户点击某个按钮就显示邮件中的图片 | Yes | Yes | Yes | No | No | Yes | Yes | N/A |
当发件人在用户的联系人列表里时是否默认显示图片 | Yes | No | Yes | No | Yes | Yes | Yes | Yes |
发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念) | Yes | N/A | Yes | No | N/A | N/A | N/A | N/A |
图片被屏蔽时是否显示alt属性 | No | Yes | No | No | No | No | No | N/A |
预览时显示windows的主题样式 | No | No | No | No | Yes | Yes | Yes | Yes |
来源:EmailLabs, 2004 。国内用户常用的Foxmail似乎没有屏蔽邮件内图片的功能,我也找不到相关设置的地方。
一旦图片被屏蔽,整个邮件就会变得面目全非,这里有以下一些建议:
- 重要内容尽量避免使用图片,比如标题、链接等;
- 制作一份和邮件内容一样的web页面,然后在邮件顶部写一句话,类似:“如果您无法查看邮件内容,请点击这里查看”;
- 所有图片都要加上alt属性;
- 所有的图片都要定义高和宽;
- 通知收件人把你的发件地址加入白名单。
Outlook 2007的限制
由于outlook 2007使用了word的渲染引擎来展现邮件内容,所以很多HTML属性没法得到支持了,比如:
- 背景图片(这一点很重要!)
- css浮动和定位(这个没啥用)
- 自定义列表项的图像(这个也没啥用)
- Flash(反正不放)
- GIF动画
- 图片的alt属性(值得注意)
- 表单(反正不放)
这些细节还是应该注意一下。
附:Email客户端的CSS支持情况
本资料来自国外某邮件营销公司,所以缺乏国内邮件客户端的数据。
<style> 标签
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
<head>中的<style>标签 | No | No | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
<body>中的<style>标签 | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
<link> 标签
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
<head>中的<link>标签 | N o | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
<body>中的<link>标签 | No | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
CSS 选择器
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
* | No | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
e | No | No | No | No | Yes | Yes | Yes | Yes | Yes | Yes | No |
e > f | No | No | Yes | No | No | No | No | Yes | Yes | Yes | No |
e:link | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:active, e:hover |
No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:focus | No | No | Yes | No | No | No | No | Yes | Yes | Yes | No |
e + f | No | Yes | Yes | No | No | No | No | Yes | Yes | No | No |
e [foo] | No | Yes | Yes | No | No | No | No | Yes | Yes | No | No |
e.className | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e#id | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:first-line | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
e:first-letter | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
CSS 属性
gmail | Hotmail | Yahoo | Live Mail | Outlook/OE | AOL | Lotus Notes | Thunderbird | Mac Email | Entourage | Eudora | |
background-color | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
background-image | No | Yes, but | Yes | No | Yes * | Yes | Yes | Yes | Yes | Yes | No |
background-position | No | No | No | No | Yes * | Yes | No | Yes | Yes | Yes | No |
background-repeat | No | Yes | Yes | No | Yes * | Yes | No | Yes | Yes | Yes | No |
border | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
border-collapse | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | No | No |
border-spacing | Yes | No | Yes | No | No | No | No | Yes | Yes | No | No |
bottom | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
caption-side | Yes | No | Yes | No | No | No | No | Yes | No | No | No |
clip | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
color | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
cursor | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | No | No |
direction | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No | No |
display | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No | No |
empty-cells | Yes | No | Yes | No | No | No | No | Yes | Yes | No | No |
filter | No | No | Yes | Yes | No | No | No | No | No | No | No |
float | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
font-family | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
font-size | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
font-style | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
font-variant | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
font-weight | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
height | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
left | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
letter-spacing | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
line-height | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
list-style-image | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
list-style-position | Yes | No | No | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
list-style-type | Yes | No | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
margin | Yes | No | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
opacity | No | No | Yes | Yes | No | No | No | Yes | Yes | No | No |
overflow | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
padding | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
position | No | No | No | No | Yes | Yes | No | Yes | Yes | Yes | No |
right | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
table-layout | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
text-align | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
text-decoration | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | No |
text-indent | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
text-transform | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
top | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
vertical-align | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
visibility | No | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
white-space | Yes | Yes | Yes | No | No | No | No | Yes | Yes | Yes | No |
width | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
word-spacing | Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | No |
z-index | No | Yes | Yes | No | Yes | Yes | No | Yes | Yes | Yes | No |
(*) 不被Microsoft Outlook 2007支持。
转载自:
http://ued.koubei.com/?p=239
http://blog.csdn.net/liuyong0818/archive/2008/11/15/3305937.aspx
发表评论
-
如何解决跨域问题
2010-05-13 09:30 2401跨域问题总是很难缠, ... -
理解和应对IE内存溢出类型
2010-04-01 10:41 1339过去,内存溢出并没有对前端开发工程师造成很大的麻烦。页面都相对 ... -
Table样式css样例
2010-02-21 14:34 1814由于需要,在网上找了个table的样式稍微改了下。 < ... -
如何弹出遮罩层屏蔽页面所有操作
2010-01-25 20:08 3474这次项目中需要使用在弹出窗口时使用遮罩层来屏蔽页面上其他的操作 ... -
JavaScript一些资料
2009-12-03 08:56 797最近整理以前的一些Javascript资料,如下: -
使用Javascript进行drag&drop操作
2009-12-02 21:48 822使用Javascript进行drag&drop操作,示 ... -
使用Javascript、div层进行title等信息浮出显示
2009-12-02 21:40 2131使用Javascript、div层进行title等信息浮出显示 ... -
使用Javascript进行错误定位
2009-12-02 21:21 1068使用Javascript进行错误位置定位,示例代码如下: ... -
使用Javascript根据table中的列值进行排序
2009-12-02 21:17 1071使用Javascript根据table中的列值进行排序,示例 ... -
初级Ajax使用
2009-07-13 17:01 1127首先建立一个Javascript文件如下 function ... -
Javascript限制输入长度
2009-07-13 16:57 1214//限制最大长度 function MaxLen(obj, ... -
Javascript日期控件
2009-07-13 16:55 1337/** *本日历选择控件由tiannet根据前人经验完善而 ... -
父子页面传值问题
2009-07-09 14:14 2006父子窗口的操作有非常多的途径可以实现,如window.ope ...
相关推荐
iframe自适应高度兼容各主流浏览器,经本人亲手测试。 通过测试的浏览器:IE/Firefox/Chrome/Opera/Safari 注:此方法不支持DOM动态操作 版本太旧,自行选择
兼容各主流浏览器的自适应宽高九宫格,实现圆角阴影效果
纯js+css实现的滑动门技术,兼容各主流浏览器 ie各版本、Firefox、Opera、谷歌浏览器 非常简单易懂
这是一款js颜色选择器,兼容各大主流浏览器,希望对大家有帮助
兼容性:各版本浏览器通用.兼容ie,火狐,360等主流浏览器. 产品特点:DataGridView控件可移动,可隐藏和显示,列宽可调整, 功能强大,界面人性化.可用于动态现实数据或作为输入数据的 数据源. 使用步骤: 1.打开IIS,新建...
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
jquery实现选择图片预览功能,能兼容各大主流浏览器.如谷歌 IE 360 火狐等
一个ajax局部刷新的实例 兼容各个主流浏览器
jq冻结表头,固定左侧任意几列的demo,兼容各大主流浏览器,表头可任意改变
纯css下拉菜单兼容主流浏览器IE6+
此效果使用jquery框架,兼容所有主流浏览器
c++ 实现发送邮件,兼容163,qq,阿里邮箱,基于smtp协议
JS最简单的滚动新闻,兼容IE6及其他主流浏览器,还可以调整滚动速度
模仿 select 做的下拉菜单效果 兼容各个主流浏览器。谁用谁知道。
js图片上传预览(兼容所有主流浏览器),对现有的HTML5浏览器也做了处理
大图jQuery多屏首页焦点图代码,兼容主流浏览器
HTML5 SVG彩色线条文字时钟特效代码,兼容主流浏览器
海康威视H5播放器开发指南,兼容各种主流浏览器,chrome,IE,火狐。
兼容各浏览器的html编辑器 富文本编辑器,功能非常强悍 实用
js控件将汉字转成拼音,兼容各大主流浏览器。页面里有使用说明!