邮箱发送html邮件,遇到的问题(如阿里邮箱如何发送html邮件、qq向阿里发送邮件样式丢失等)解决方法

缘起

公司要求制作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邮箱
在这里插入图片描述
网易邮箱

在这里插入图片描述

阿里邮箱

在这里插入图片描述

源码

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值