缘起
公司要求制作html格式的邮件用来在邮箱里发送,要求要兼容各大主流邮箱,设计给了样式按照其实现后测试遇到诸多问题。
一、阿里邮箱、outlook无法粘贴html源代码
阿里和outlook邮箱发送html文件是直接打开你的html文件然后在网页中全选你的页面复制然后直接粘贴进去就可以发送的,不像qq和163可以复制自己源码进去直接生成的。
二、div+css布局在阿里、outlook里会有各类问题,如样式丢失问题
起初自己是使用div+css布局(css记得只能写行内,嵌入式和外联都是不允许的,js也不允许写,原因百度一下)结果遇到很多问题,百度邮箱html开发注意事项,改换table+css布局,同时开发时注意相关问题。
三、qq邮箱向阿里邮箱发送邮件样式丢失
首先颜色不能使用color:rgba(30,29,28,1);
只能使用color:#1e1d1c
的方式,再有在table里行与行的间距不能通过添加p标签隔开 而是使用br
<tr>
<td>
<p style="height:50px" />
</td>
</tr>
下面正确
<tr>
<td>
<br/>
</td>
</tr>
四、网易往qq发邮件图片丢失
如下图
因为使用QQ邮箱的时候,为了避免文件泄露信息,系统自动屏蔽了图片的显示。用户点击显示图片即可我未更改。
最终demo样式
QQ邮箱
网易邮箱
阿里邮箱