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

最新推荐文章于 2024-02-07 22:27:01 发布

ccbill

最新推荐文章于 2024-02-07 22:27:01 发布

阅读量3.5k

点赞数

分类专栏： HTML邮件文章标签： HTML邮件邮件制作营销邮件 HTML邮箱精美邮件制作

本文链接：https://blog.csdn.net/ccbill/article/details/99834602

版权

HTML邮件专栏收录该内容

9 篇文章 0 订阅

订阅专栏

注意问题

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

所有文档声明无效，不能用给邮件声明doctype，邮件服务商会自动为你生成。
所有样式做好写在行内，因为有些邮件服务商会去除声明的style标签（我印象中是微信手机邮箱就会）。
所有布局使用table布局，如果页面元素不多，最好是每个元素外都使用一个table包裹，保证最好的邮件兼容性。
宽度适当限制，因为邮件的内容可视区比较小，最好邮件宽度限制在600-800之间。
最好给文字的元素加上font-size，因为有些邮件服务商会给P标签默认加上font-size为14px
图片元素必须设置行内属性width，最好style同时设置，否则如果图片大于你父级元素，outlook下会溢出。<img width="60" alt="这是图片" style="width:60px;"/>
outlook下图片间隔不能使用padding和margin，如果要设置图片间隔，我的做法是外面包裹一层table，然后设置td的padding
图片最后不要使用背景的形式，而是直接使用img标签，不然outlook和一些国内的邮件服务商都显示不了。
不要给图片加边框，因为box-sizing每个邮件服务商都不同，加边框后所需要做的兼容性的工作量大量增加。
阿里云邮箱背景不要使用rgba，因为不能识别，它默认转换为hex。
每个table最好都设置宽度，已达到最好的兼容性。
思想不要太前卫，思想必须保守，最好退回到2000年前，因为绝大部分现在流行的CSS3样式都不能很好的兼容。

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

解决方案

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