支持html邮件,HTML邮件兼容问题与解决方案
HTML 邮件内容虽然也是 HTML,但是和我们在网页上使用的 HTML 不同,因为安全原因,各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理,不会按照你写的原本 HTML 展示。
913331539-58da184e28150.png
在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式。
尤其是鼎鼎大名的 OutLook,从 OutLook2007 开始便使用 Word HTML 引擎进行渲染,为了它的安全性从而使得整个邮件倒退回了 2000 年前,为了邮件的兼容性你不得不使用很多废弃的标签、属性,并且这一状况将会维持无数个
年头,因为虽然万事终有尽头,但 OutLook 始终存在。
因为微软一向地特立独行,使得 OutLook 成为了最难啃的骨头。因为 OutLook 支持的标签和属性少得可怜,所以只要兼容了 OutLook,其他邮箱客户端基本都不会有什么问题。如果你开始开发 HTML 邮件并打算为其在各个邮箱里的兼容性努力,下面的建议将非常有用。
基本规则
布局使用table
这几乎是 HTML 邮件与普通 HTML 页面最大的区别,因为各个邮箱对div + css这一套布局的解析问题很大(如 float / position 等 CSS 都会被过滤,甚至 margin: 0 auto; 都不起作用),基本各大邮箱都会解析混乱,所以老式的 table 布局是上乘之选。这就意味着 HTML 邮件中几乎只有这几个元素——table / tr / td / span / img / a,尽量避免使用 div / p或是其他标签。
而且并不是所有邮箱都支持 colspan / rowspan 属性,所以所有布局都需要使用 table 嵌套解决。
使用表格布局导致的最直接的问题就是会产生多余的空白像素,所以要养成习惯给每个table 都加上边框 border,单元格内边距 cellpadding,单元格间距 cellspacing,边框合并属性 border-collapse 这些属性:
body 外的内容几乎无用
我们知道完整的 HTML 包括 DOCTYPE 声明、html和 head标签及其内容、body 标签,对于在一个 iframe 中显示邮件内容的邮箱还好,会保留上述结构,但是有些邮件(如 Gmail)都是在 div 中直接包含,这就对安全要求极为苛刻。安全原因邮箱会默认把上述结构做删除处理,所以写了几乎没有作用,在可能的情况下尽量把内容写到 body 内,甚至建议从 table开写,直接放弃 DOCTYPE / html / head / body标签。
使用内联样式
并不是使用 style 属性就保险了,很多邮箱会对特定标签的属性做强制改造。
比如在 OutLook 中,图片使用以下方式来设置宽高是无效的:
正确的设置方法:
所以在有属性能够实现样式效果的时候尽量使用属性,常见的可用属性有:
width
height
bgcolor
align
valign
……
所有样式单独指定
在写页面的时候利用 CSS 的继承会为我们带来很多便利,但是到了 HTML 邮件,一切都要 say NO!
其实继承规则依旧有效,但是大部分邮件都无法完整继承样式,并且邮箱的默认样式也会对邮件产生一些头疼的干扰。比如 font-family,OutLook 中若想改变字体,至少每个 table 中都要指定 font-family,而在 QQ 邮箱甚至必须每个 td 都设置 font-family 才能全部生效。
因此每个标签单独指定样式是必须的,尽可能不要依赖继承,即使它十分地繁琐。
脚本?想都不要想!
图片相关
style 内容里面 background 可以设置 color,但是 image 会被过滤,就是说不能通过 CSS 来设置背景图片了。但是有一个很有意思的元素属性,也叫 background,里面可以定义一个图片路径,但是功能有限,比如无法定位背景图片等。
例如要给一个单元格加一个背景,必须这样写:
指定 width 和 height 属性
因为在有些邮箱里,图片不是默认加载的,往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构,加上 alt 属性更可以明确告知图片的内容让用户选择是否下载它们。
如果因为项目需要(比如需要适配 Retina 高分屏),width 和 height属性更是必不可少的,并且由于一些 outlook 版本的奇葩表现,width 和 height 属性一定不要加上单位!一定不要加上单位!一定不要加上单位!重要的事情说三遍。
否则你希望是这样的:
3981295862-58da1e74a19f6_articlex.png
但实际上它是这样的
3290130228-58da1f0640707_articlex.png
因为加上单位会使一些版本的 OutLook 无法正确识别,导致图片显示使用实际的宽高而非我们设置的。
当然,常规项目中应尽可能保持设置的 width 和 height 的值与实际的宽高一致。
margin 与 padding
Outlook 2007-2013 不支持图片的 margin 与 padding 样式,必要的时候可以尝试 hspace 和 vspace 属性:
或者为图片本身添加额外的空间(这个实在太LOW了,不推荐)
文字相关
字体
在 HTML 邮件中,font-family 只支持系统字体,不支持自定义字体,也不支持 font 简写,color 尽可能也不要使用简写:
font: 12px / 14px Arial, sans-serif;
color: #999;
需要写成:
line-height: 14px;
font-size: 12px;
font-family: "微软雅黑", Arial, sans-serif;
color: #999999;
对于加粗字体,我们可以使用 b 标签而不是 CSS 的 font-weight,前文说过,HTML 标签和属性能解决的样式决不使用 CSS 样式。
行高
在 OutLook 中会有个默认的行高最小值,特别是当设置 font-family 为微软雅黑时,默认的行高差不多为 Word 中的两倍行距,如果line-height 设置的值小于默认的行高,无论你设置的是多少,则始终使用默认值,在很多情况下这是不能忍的,好在有个神奇的 mso-line-height-rule,使用行高时添加 mso-line-height-rule:exactly; 就能使行高始终等于我们所设置的值。
这只是微软的 CSS 属性,对其他客户端没影响。并且该属性只在块元素上有效,所以想在 font 和 span 中用就洗洗睡了吧。
使用前:
704592570-58da2a340ac3b_articlex.png
使用后:
1352346777-58da2a584a62d_articlex.png
不过这种实现方式有点瑕疵,就是会导致大号字体无法垂直居中。
参考文献:
支持html邮件,HTML邮件兼容问题与解决方案相关推荐
- 发送邮件(支持所有smtp协议邮件发送)
1.所需包: javax.mail.jar maven : <!-- https://mvnrepository.com/artifact/javax.mail/mail --> < ...
- 腾讯企业邮箱,QQ邮箱 支持通过客户端进行邮件管理
腾讯企业邮箱支持通过客户端进行邮件管理. POP3/SMTP协议 收发邮件服务器地址分别如下. 接收邮件服务器:pop.exmail.qq.com (端口 110) 发送邮件服务器:smtp.exma ...
- 服务器发不了邮件,发邮件服务器-如何发邮件?为什么发不出去?服务器是什么?发邮件时,信息要服务器 爱问知识人...
Outlook Express邮箱使用全攻略(转自云之渊论坛: ) 1.防止OE发送乱码正确的方法是: 首先,在邮件编辑窗口中,用鼠标单击菜单栏中的"格式"菜单,并从弹出的下拉菜单 ...
- iOS12系统应用发送普通邮件构建邮件
iOS12系统应用发送普通邮件构建邮件 当确定设备支持邮件发送功能后,开发者就可以实现该功能.根据是否包含附件,邮件可以分为普通邮件和附件邮件两种.本节首先讲解如何发送普通邮件.实现过程如下: 1.构 ...
- 金笛邮件之邮件倒入专题
先来看一段介绍: 春笛作为国内专业的电子邮件系统厂商,已自主开发并成功推出了国内外领先的金笛®电子邮件系统.金笛®短信平台.金笛®网站发布系统等软件产品,春笛以高质量的产品.及时满意的服务, ...
- java web 邮件_Javaweb_邮件发送
邮件服务器 简单理解: 用户A给用户B发邮件,A把邮件发送到A所用的邮件服务器(简称a服务器),然后,a服务器确定收件人(B)的邮件服务器(b服务器),a服务器就可以将用户A的邮件发送到b服务器上,到 ...
- 邮件服务器邮件群发几个技巧
电子商务的火热,促进了网络营销的发展,邮件营销在网络营销的地位不可忽视,怎样才能更高效实现邮件营销呢?邮件群发是实现高效营销的手段之一.做过网络营销的都知道,邮件群发的效果好不好,不仅和工具有关,更多 ...
- 【干货】选择外贸邮件群发软件,外贸邮件营销软件,邮件群发代发软件15条建议!
直接干货上 邮件硬件层面: 1. 邮件群发服务器必需在海外 理由:在海外的服务器丢件少.延迟少.到达率高 2.邮件发信IP必需优质,有专门测试工具,可以测试发信IP信誉值(可以联系EmailCamel ...
- html5 邮件列表,邮件列表
邮件列表[编辑] 邮件列表(Mailing Lists)利用了E-mail的广播功能,将某一重要信息的数分拷贝传送至所有需要它的用户手中.Mailing Lists拥有一个讨论组列表,每一个讨论组 ...
- 如何撤回已发送的邮件?邮件撤回成功后对方还能看到吗
公司新来的小白给领导的邮件数据弄错了,没有检查就发给来到了,导致给客户的方案错误,差点影响公司业务.小白刚刚检讨完,懊恼不已.既然微信消息可以撤回,**如何撤回已发送的邮件呢?**其实,已发送邮件的确 ...
最新文章
- MATLAB和Python读取wave文件的波形对比
- mysql中00933错误_ORA-00933: SQL command not properly ended
- 某大学多站联动获取webshell
- 【支付宝服务窗】JEECG支付宝服务窗平台指南
- java 基本语法都懂 ee_Java EE(一) 基础语法
- Python语法教程-基础语法01
- Xamarin iOS教程之视图显示图像
- 【基础教程】基于matlab疫情防护动图制作【含Matlab源码 028期】
- Google Earth 6 Beta版发布 (供下载地址)
- 精读《useEffect 完全指南》
- POJ1251 Jungle Roads(kru)
- bin和obj文件夹
- 金彩教育:拼多多运营的方法有哪些
- 发票查验|身份证实名认证增强版API开发文档
- 经纬度转换成屏幕坐标
- css过滤白色,使用CSS3模糊滤镜时,白色模糊的图像?
- matplotlib cm.coolwarm报错 解决方法
- PPG衬衫改变了什么
- U盘单个文件最大4G限制问题
- Java程序员必会!java入门资料百度云资源
热门文章
- 青年歌手姚贝娜乳腺癌复发去世
- SVN各种错误提示产生原因及处理方法大全
- 奥斯堕落夫斯基娃的炸鸡(埃式筛 + 尺取)
- 三种常用的LED驱动电源电路图详解
- 学生管理系统(web版)
- 《揭秘跨境电商》读书笔记
- 1Curiosity--NASA's Mission to Mars 2019/11/05F450KLG2H
- 树莓派Ubuntu 16.04 MATA系统 修改用户文件夹名后,提示configure it with blueman-service...
- 细细探究MySQL Group Replicaiton — 配置维护故障处理全集
- PyGmae:有限状态机实践(十一)