系统邮件模板的邮箱兼容性

来源：互联网发布：足不出户知天下作文编辑：程序博客网时间：2024/05/01 08:09

近期支付宝的系统邮件进行了一次改版，在这次改版的过程中，我们遇到了很多在网页中显示正常的html邮件在邮箱中显示异常的问题，下面我们把遇到的问题和一些常用的代码书写规则和大家分享：

共性问题：（许多邮箱都会出现的问题）

1. 字体大小会发生变化，排版出现异常：

解决方法：使用table来排版，每个部分的样式用内联样式写法style=”…” ，例如：

这种写法使样式能准确的作用到每个html元素，防止部分web客户端过滤全局样式或者因同名样式引起的问题。其实这是每个edm制作方法中都会提到的问题，只是刚开始做edm的人大多都有偷懒的心态，事实证明这个懒偷不得，就算是用id选择器添加样式的写法也会被邮箱忽略。

2. 链接显示颜色被改变：

这个问题和上一个问题有一定关联。一些邮箱（如sohu和gmail）会将链接定义成特定的颜色，若使用内联样式控制颜色，又会导致在其它邮箱中悬浮状态的链接不能变色。为了保证链接颜色显示正常，又能让用户的鼠标移过时产生变化，我们最后在模板中采用了变化下划线的方法。

3. 图片显示：

图片必须设定高宽，关键图片alt=”…” 属性要写得很清楚，不要使用背景图片。

写alt属性是让浏览器在图片未被显示前提示图片内容。不使用背景图片是防止部分web邮箱和客户端对背景图片进行过滤，例如Qq邮箱中的背景图片会随窗口的大小变化而产生移动，而outlook2007干脆就过滤了背景图片。

个性问题：（个别邮箱遇到的问题）

1. TOM邮箱排版问题：

TOM邮箱默认<span>标签是另起一行，在代码中尽量不要使用span标签（如改变字体颜色），使用其他标签替代，修改后的“小提醒”部分的代码写法：

2. Outlook2007：没有背景图片、贫乏的背景颜色、不支持CSS的float或 position ;

原因：Outlook 2007已经不再使用IE来渲染HTML格式E-mail，改而使用Word2007引擎，以期提高邮件的安全性、增强渲染的统一性。

注意css样式中的line-height属性在outlook2007中会导致拼合的图片存在间隙，因此需要确保该属性只影响文字区域。

此外，设计师如何在测试邮件在各个邮箱中的效果？在这里我们推荐用163邮箱进行邮件测试（非常感谢国际站的同学的提供这个方法）：

方法：注册163邮箱；选择“写信”；在文字样式栏上点击“全部功能”；在弹出的栏目中选最后一个“<>”即可发送html代码；

第一步：

第二步：

最后，非常感谢集团其它公司以及许多同行给予我们的帮助，在修改邮件模板的过程中，我们从这里也得到很多帮助：

附：补充资料（感谢伯约的补充）

关于Outlook2007：

因为Outlook2007用的是Word2007来检测HTML邮件中的标签元素的,由于Word2007不支持以下CSS属性,所以会有一系列问题

background-attachment; background-image; background-position; background-repeat;

clear; display; float; list-style-image; list-style-position

以下的链接中对outlook2007（word2007）支持的HTML和CSS作了详细说明：

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2):

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2):

2007 Office System Tool: Outlook HTML and CSS Validator: 点此查看

星期二, 11月 4th, 2008 前端技术.