`
dengminhui
  • 浏览: 167867 次
  • 来自: ...
社区版块
存档分类
最新评论

如何编写兼容各主流邮箱的HTML邮件

HTMLCSSLotusGmailYahoo 
阅读更多

最近一个需求中遇到了发送邮件的功能，发现很多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页面，为了保证最大的兼容性，有以下几点需要注意：

对于纯文本邮件：

  1. 邮件标题不要超过18个字；
  2. 每行不要超过34个字。

对于HTML邮件：

  1. 邮件标题不要超过18个字；
  2. HTML代码和图片尽量不要超过50kb；
  3. 页面宽度推荐500px，最大不要超过600px；
  4. 避免使用边缘的、非主流的HTML技术；
  5. 不使用css来布局，应该使用表格来布局；
  6. 不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style="font-family:arial,helvetica; font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
  8. body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
  9. 如果整个邮件有用到背景色或背景图，建议用以下方式处理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 邮件内容 -->
    </td>
    </tr>
    </table>
  10. 有背景图片的时候，我们要采用这种写法：<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似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。

一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：

  1. 重要内容尽量避免使用图片，比如标题、链接等；
  2. 制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；
  3. 所有图片都要加上alt属性；
  4. 所有的图片都要定义高和宽；
  5. 通知收件人把你的发件地址加入白名单。

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

分享到：
| FindBugs插件的安装与使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    群发邮件(含源码工程)，支持所有主流邮箱，腾讯企业邮箱亲测可用

    描述中提到“支持所有主流邮箱”，这意味着该系统兼容市面上如QQ邮箱、网易163邮箱、阿里巴巴的阿里云邮箱、Google的Gmail以及Microsoft的Outlook等广泛使用的电子邮件服务。特别指出“腾讯企业邮箱亲测可用”，意味...

    163邮箱html模版

    163邮箱HTML模板通常包含精心设计的布局、样式和交互元素，以确保邮件在不同设备和邮件客户端上都能呈现出一致且吸引人的视觉效果。下面我们将详细探讨HTML模板在163邮箱中的应用及其相关知识点。 1. **HTML基础...

    126邮箱用的Html编辑器

    8. **兼容性**：确保生成的HTML代码兼容主流的电子邮件客户端，如Outlook、Gmail等，防止格式错乱。 9. **安全控制**：为防止恶意代码的插入，编辑器会进行一定的安全检查，限制某些可能引起问题的HTML标签或属性。...

    制作主流邮箱能正常显示的HTML邮件的技巧

    编写HTML邮件时，重要的是考虑到兼容性和用户体验。测试邮件在多个主流邮箱服务（如Gmail、Hotmail、163、Sohu和Sina）中的显示效果，并进行必要的调整，是确保邮件质量的关键步骤。通过遵循这些技巧，可以提高HTML...

    新浪邮箱html在线编辑器

    7. **兼容性**：考虑到不同的浏览器和设备，新浪邮箱HTML在线编辑器优化了跨平台兼容性，无论是在Windows还是Mac系统，Chrome、Firefox、Safari还是Edge等主流浏览器，都能提供一致的编辑体验。 8. **插件和扩展**...

    qq邮箱的JS在线编辑器

    4. **跨平台兼容性**：由于不同的浏览器可能对JavaScript和HTML的实现存在差异，JS编辑器需要考虑兼容性问题，确保在主流浏览器如Chrome、Firefox、Safari、Edge和IE上都能正常工作。这可能需要使用条件语句、...

    类163邮件的html编辑器

    9. **兼容性**：类163邮件的HTML编辑器应保证生成的代码兼容各种主流邮件客户端，如Outlook、Gmail、Yahoo等。 10. **保存和导入**：用户可以保存自己的编辑样式和模板，以便后续重复使用，也可以导入已有的HTML...

    C# 编写的 发送邮件的小软件

    综上所述，这个C#编写的小软件利用了.NET框架中的邮件发送功能，实现了与多种主流邮箱的兼容，为用户提供了一种便捷的自动化发送邮件的解决方案。通过深入理解上述知识点，开发者可以自行构建类似功能的应用，满足...

    QQ邮箱的htmleditor

    QQ邮箱的htmleditor是一款轻量级的HTML编辑器，其设计目的是为了提供一个简洁而高效的文本编辑体验，尤其适用于电子邮件的编写。这款编辑器在保证功能完备的同时，实现了极小的体积，仅为15KB，这在网页开发中是非常...

    仿163邮箱后台界面模板

    7. **浏览器兼容性**：开发过程中，开发者需要确保模板在主流浏览器（如Chrome、Firefox、Safari和IE）上都能正常运行，这需要对各种浏览器的特性有深入理解，并可能涉及到CSS hack或者polyfill技术。 综上所述，...

    全能邮箱一键登录 v1.0

    全能邮箱一键登录 v1.0 是一款旨在简化用户邮箱登录过程的软件，它支持市面上几乎所有的主流免费邮箱服务。这款程序的独特之处在于其便捷性，用户只需要进行一次配置，之后便能轻松实现一键快速登录已设定的邮箱账户...

    4封好看的邮箱模-用于营销的模板

    本资源提供的是四款精美的邮箱模板，专为营销目的设计，适用于QQ邮箱、网易邮箱、163邮箱等主流电子邮箱平台。 首先，我们要了解HTML5和CSS3在邮箱模板设计中的作用。HTML5是现代网页设计的标准，它引入了许多新的...

    网易 新浪 QQ邮箱简单编辑器

    在IT领域，电子邮件服务是日常工作中不可或缺的一部分，而网易、新浪和QQ邮箱作为国内主流的电子邮箱服务商，提供了丰富的功能来满足用户需求。本话题主要关注这些邮箱服务中的一个关键功能——邮件编辑器，以及一些...

    bussy-free-html-email-template_bussy_HTML5_CSS3源码_

    Bussy-Free-HTML-Email-Template这个压缩包包含了多个预设的邮件模板，每个模板都经过精心设计，符合最佳实践，能兼容各种电子邮件客户端和Web邮箱服务。这些模板通常包括头部（header）、主体（body）和尾部...

    电子邮件加密系统展示和各类技术汇总(1)

    MailCloak是一款集成式的邮件加密客户端，它支持多种主流邮箱服务，包括Gmail、Yahoo Mail、Live Mail以及126、163、Sina、Sohu、Tom、21cn、QQ等国内邮箱服务。此外，MailCloak也兼容部分邮件客户端软件，如...

    微力邮件服务器(linux版)安装说明.docx

    1. **兼容性广泛**：支持主流的邮件协议，确保与其他邮件客户端和服务之间的互操作性。 2. **安全管理功能**：内置反病毒保护、反垃圾邮件引擎及开放式传播保护机制，确保邮件传输的安全性。 3. **多域与多用户支持*...

    [其他类别]QQ邮箱编辑器 v1.0 (小小菜刀PHP版)_htmleditor_php.zip

    9. **兼容性**：考虑到不同浏览器的差异，QQ邮箱编辑器v1.0应确保在主流浏览器上都能正常工作。 在实际应用中，QQ邮箱编辑器 v1.0 可能会集成到各种Web应用程序中，例如博客系统、CMS（内容管理系统）、论坛、在线...

    cmail cmail cmail cmail

    6. **移动设备兼容**：Cmail可以与主流的移动设备和邮箱客户端（如Outlook、iPhone、Android等）无缝集成，让用户在任何地方都能轻松访问邮件。 7. **管理员控制**：对于企业用户，Cmail提供管理员控制面板，可以...

    全屏大气自适应背景切换html模板_全屏 大气 自适应 背景 切换 上线 订阅 倒计时.zip

    9. **浏览器兼容性**：为了确保模板在各种浏览器中表现一致，开发者需要测试并解决在IE、Firefox、Chrome、Safari等主流浏览器上的兼容问题。 10. **性能优化**：优化图片大小、合并CSS和JS文件、利用CDN加速资源...

Magicbox
Global site tag (gtag.js) - Google Analytics