制作HTML邮件邮箱注意问题和解决方案--兼容手机邮箱、电脑邮箱和邮件客户端

Scroll Down

注意问题
邮件发展多年,一直是很多人沟通联系和推广业务的主要工具,很多大公司都会发HTML邮件,因为HTML邮件比普通文本邮件更吸引人,震撼力更强。
但作为一名普通员工,我们如果自己制作一封这样的HTML邮件,实在是费事费力不讨好。但好可惜我不是公司的普通员工,作为公司唯一的前端,这个麻烦事情就落在我身上,所以把我的经验和解决方案写出来大家作为参考。

所有文档声明无效,不能用给邮件声明doctype,邮件服务商会自动为你生成。

所有样式做好写在行内,因为有些邮件服务商会去除声明的style标签(我印象中是微信手机邮箱就会)。

所有布局使用table布局,如果页面元素不多,最好是每个元素外都使用一个table包裹,保证最好的邮件兼容性。

宽度适当限制,因为邮件的内容可视区比较小,最好邮件宽度限制在600-800之间。

最好给文字的元素加上font-size,因为有些邮件服务商会给P标签默认加上font-size为14px

图片元素必须设置行内属性width,最好style同时设置,否则如果图片大于你父级元素,outlook下会溢出。
这是图片

outlook下图片间隔不能使用padding和margin,如果要设置图片间隔,我的做法是外面包裹一层table,然后设置td的padding

图片最后不要使用背景的形式,而是直接使用img标签,不然outlook和一些国内的邮件服务商都显示不了。

不要给图片加边框,因为box-sizing每个邮件服务商都不同,加边框后所需要做的兼容性的工作量大量增加。

阿里云邮箱背景不要使用rgba,因为不能识别,它默认转换为hex。

每个table最好都设置宽度,已达到最好的兼容性。

思想不要太前卫,思想必须保守,最好退回到2000年前,因为绝大部分现在流行的CSS3样式都不能很好的兼容。

我作为一个公司唯一的小前端,做一封公司的HTML邮件,耗了我大半生的功力,总算是勉强完成了任务,发现这样的事情不是我想需要的。新技术用不上,想使用css3装装逼都不行,兼容性要求大。

解决方案
因为制作一封兼容性强的HTML邮件已经到了呕心沥血的地步,所以作为一个偷懒的前端工作者,我当然不会浪费时间在这些我不喜欢的工作上,于是我网上搜索一些直接生成HTML邮件的应用,尝试了几款,兼容性都不满意。几经辛苦搜索到一个我比较满意的拉易网应用,直接能拖拽生成HTML邮件,兼容性还行,能兼容到outlook2019客户端(2016版及以下版本的outlook我没测,不知道兼容性如何)

易拉网拖拽生成邮件网页
————————————————
原文链接:https://blog.csdn.net/ccbill/article/details/99834602