最近公司的招聘模板要重做一版,拿到新的设计图之后,大部分版面都是图片,不知道各个邮箱对于外链图片的支持性,如何,经过测试,这里做一个小小的整理:

测试对象:QQ邮箱、163邮箱、126邮箱、yeah邮箱、Foxmail、搜狐闪电邮箱、新浪邮箱、雅虎邮箱、Gmail、阿里云个人邮箱、TOM邮箱、139邮箱、189邮箱、沃邮箱

设备对象:pc + 移动端

图片存储:七牛云

1、QQ邮箱

概况:QQ邮箱支持背景图片,同样支持图片的src属性,其他css属性都没有问题。甚至可以自定义font-family,但是在收到带图片的邮件时,由于发件方的不收信任程度,会有一个“显示图片的提示”,如果不点击这个按钮,邮件中的图片无法显示。

不同邮箱对html邮件模板的支持-Rome-Web 前端开发博客

解决:显示图片、或者成为腾讯受信任的发件方。

移动端支持:移动端支持良好

2、163邮箱、126邮箱、yeah邮箱

概况:显示正常,无异常情况。

移动端支持:移动端支持良好。

126邮箱和yeah邮箱,都是网易旗下,对于html模板的支持,同163邮箱。

3、Foxmail、Gmai、搜狐闪电邮箱、新浪邮箱

概况:这四种邮箱,显示都正常。

注意:搜狐邮箱不支持html模板中的注释,所以,注释要删掉。

移动端支持:移动端支持良好。

4、雅虎邮箱

概况:默认不显示图片,需要更改设置,但是可以显示背景图片,如下:

不同邮箱对html邮件模板的支持-Rome-Web 前端开发博客

其他支持还不错,雅虎邮箱默认的字体看着也很舒服,移动的支持良好。

解决:修改img图片为背景图片。

5、outlook邮箱

概况:支持img标签加载图片,不支持background属性,同时不支持position属性,所以没有办法兼顾二者。和雅虎邮箱的图片支持方式正好相反((o~.~o));

解决:将重要的信息,用文字表示,暂时放弃outlook邮箱。

6、阿里云个人邮箱

概况:显示正常。

移动端支持:移动端支持良好。

7、TOM邮箱

概况:显示正常。

移动端支持:移动端支持良好。

8、139邮箱

概况:显示正常。

移动端支持:移动端支持良好。

9、189邮箱

概况:显示正常,支持@font-face自定义字体(发件方为163邮箱)。

移动端支持:移动端支持良好。

10、21cn邮箱

概况:显示正常,支持@font-face自定义字体(发件方为163邮箱)。

移动端支持:移动端支持良好。

11、沃邮箱

概况:显示正常,支持@font-face自定义字体(发件方为163邮箱)。

移动端支持:移动端支持良好。

小结:大部分邮箱对于html模板的支持还是不错的,需要注意的就是,处于安全性考虑,模板中都不支持js代码,部分邮箱不支持内联样式表,因为在模板中,他们会处理class名字,部分会加上自己的前缀,所以还是使用行内样式比较通用。对于用户来说,如果outlook邮箱的使用用户数量,多于雅虎邮箱的用户数量,在html模板处理图片的时候,就尽量使用img标签来引入图片,反之,使用background来处理图片。对于html模板中对字体有要求的情况,经过测试,与发件邮箱的类型有关,测试使用Foxmail和163邮箱发件,收到163发来的邮件,支持自定义@font-face,不支持Foxmail。如果html模板中使用的全是background引入的图片,可以在底部引入一张1*1像素的透明图片来激活邮箱的“显示图片”这个属性。对于其他的问题,欢迎留言补充。