背景

最近接到一个新的需求，公司的营销邮件各个模块组件实现可复用，既低代码平台，在此之前公司的邮件都通过图片进行实现的，或者每次有新版本的邮件就重新进行切图实现，现在让营销人员通过低代码平台进行邮件编辑

初期

一开始接到需求，心想不就把各组件的布局写出来，再拖拽，不就可以了，说做就做，码不停手，很快就把二十多个组件布局完成了，心想测试一下吧，将css文件放在外网服务器上，外联引入一下，看一下效果，结果效果是这样的

引入的样式不见了~~~ 查询一下，需要将样式写成行内，返工再次上阵

中前期

将所有的样式一一改为行内，再次测试发送，随心一测

优秀可以了，专心致志的把剩下组件写完，写好各个组件的配置页面，用来配置各个组件的产品数，背景色，内边距，外边距等等~~~ 心想也没那么难嘛，还是很简单的，写完各个组件的配置页面，测试一下可以上线了 纳尼

我的心情比版面更加凌乱。。。再次查看样式，在Gmail邮箱中，position属性值都没有了，怎么会这样，寄人篱下，改吧，这次我认真翻阅，查看邮箱里的各大邮件，发现都是table布局，好嘞，整装再次出发，使用table布局，不使用浮动实现左右布局，不使用position设定小图标位置，我使用margin负值，一通操作猛如虎，再次修改，发送~~~ 查看qq邮箱，优秀！！！！一切完美，再次查看Gmail邮箱，印证了‘一通操作猛如虎’的下一句，还是错版，好嘞您嘞，再次查看，我就知道，事情不会这么快结束，margin负值不能用，好嘞您嘞，再次踏上征途

中后期

开始思索，类似于定位中间的小图标，我使用table布局可以将其定位在中间，那位于产品图片上的小图标，又该怎么办呢，有了~~~ 我把他生成一个新的图片替换就好了，说干就干，通过使用html2canvas将html内容生成图片，先生成一个图片看看，对不对，怎么会这样，我的图片内容呢，一看控制台，跨域了，那我加上crossOrigin ="anonymous" 应该可以了吧，what，还是不行，转成base64吧，真棒，优秀，可以了诶，测试发送一下，哇哦，没有问题了，发送给营销部门验收一下

后期

终于结束了，诶~~~ 折腾几折腾，誒~~~ ，怕什么来什么，pc端没有问题，手机端再次错版，商品标题超行没有隐藏，各种~~~ 好嘞，还是高兴太早了，再次开始研究，pc没问题啊，手机端兼容性不应该更好吗，怎么这样纸，开始研究，原来Gmail把height属性转成了min-height,再次添加max-height属性

测试发送，果然

又get手机端新的bug，Gmail影响了line-height，调整块元素高度，添加margin-bottom值，结束。 真的是一言难尽啊

总结

1.邮件html样式使用行内样式

2.邮件html尽可能采用table布局，减少各种干扰

3.Gmail中忽略了position属性值

4.Gmail中忽略了margin和padding的负值属性

5.Gmaill中height属性会变为min-height

6.Gmaill中的DOCTYPE会影响line-height

7.html2canvas使用中dom中包含外网图片，将图片转为base64可解决问题

Gmail其他规则

1.不支持display:'none'

2.链接默认样式是蓝色并带下划线

3.不支持Backgrouds

4.不支持图像路径中包含空格

5.会自动为未添加链接的URLS和email addresses 添加链接

6.会自动抓取邮件中的电话号码

7.邮箱提示Html大小不宜超过102k

8.DOCTYPE 在图片下方会增加额外的空间